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 标签），并分配 @987654325 @按照你想要的顺序给单品设置（数字）如下图：

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>