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>