中間列頂部的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>