3 列响应式布局，中间列顶部

Question

我有一个旧的 3 栏网站，中间的第 2 栏包含重要内容（大小不一）。

是否可以单独使用 CSS（即模板未受影响），使其具有响应性，以便在窄屏幕上，顺序（从上到下）变为 Col-2，然后是 Col-1，然后Col-3？即

模板：

<div class="col-1">Left Sidebar</div>
<div class="col-2">Main content</div>
<div class="col-3">Right sidebar</div>

我希望在较小屏幕宽度上的媒体查询显示为：

Main content

Left Sidebar

Right sidebar

Answer 1

您可以使用 flexbox 实现：在媒体查询中，您将 display: flex 和 flex-direction: column 分配给容器（如果没有容器/父元素，则为 body标签），并根据您想要的顺序将 order 设置（数字）分配给单个项目，如下所示：

body { 
  display: flex;
  flex-direction: column;
}
.col-1 {
  order: 2;
  }
.col-2 {
  order: 1;
  }
.col-3 {
  order: 3;
  }

<div class="col-1">Left Sidebar</div>
<div class="col-2">Main content</div>
<div class="col-3">Right sidebar</div>

3-column responsive layout with middle column top