求助：如何让WordPress移动端侧边栏显示在内容之前

以下是几种主流布局下的实现方法，根据你的项目布局选择对应方案：

方案一：Flexbox 布局（推荐） #

无需修改 HTML 结构，通过 order 属性即可控制元素显示顺序：

/* PC端布局：内容区域占主空间，侧边栏居右 */
.container {
  display: flex;
  gap: 20px;
}
.main-content {
  flex: 1;
  order: 2; /* PC端内容显示在侧边栏之后 */
}
.sidebar {
  width: 300px;
  order: 1; /* PC端侧边栏显示在内容之前（视觉上居右） */
}

/* 移动端断点（示例为768px） */
@media (max-width: 768px) {
  .container {
    flex-direction: column; /* 切换为垂直排列 */
  }
  /* 保持order值，移动端自然呈现侧边栏在前、内容在后 */
}

方案二：Grid 布局 #

通过定义网格区域灵活调整元素位置：

/* PC端布局 */
.container {
  display: grid;
  grid-template-areas: "main sidebar";
  grid-template-columns: 1fr 300px;
  gap: 20px;
}
.main-content {
  grid-area: main;
}
.sidebar {
  grid-area: sidebar;
}

/* 移动端 */
@media (max-width: 768px) {
  .container {
    grid-template-areas: 
      "sidebar"
      "main";
    grid-template-columns: 1fr; /* 切换为单列布局 */
  }
}

方案三：传统浮动布局（适配旧项目） #

调整 HTML 结构将侧边栏放在内容之前，再通过浮动控制PC端显示顺序：

<div class="container">
  <aside class="sidebar">侧边栏内容</aside>
  <main class="main-content">主内容区域</main>
</div>

/* PC端布局 */
.container {
  overflow: hidden; /* 清除浮动 */
}
.main-content {
  float: left;
  width: calc(100% - 320px); /* 减去侧边栏宽度与间距 */
  margin-right: 20px;
}
.sidebar {
  float: right;
  width: 300px;
}

/* 移动端 */
@media (max-width: 768px) {
  .main-content, .sidebar {
    float: none;
    width: 100%;
    margin-right: 0;
  }
}

内容的提问来源于stack exchange，提问作者Aizen Sousuke