css - 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>