中间列顶部的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>