響應式堆疊div

Question

我正在使用響應式網站，在桌面/大屏幕上時，它將採用以下佈局。

1. 頭
2. 菜單
3. 內容

然後，當它在手機/小屏幕這將是

1. 頭
2. 內容
3. 菜單

該怎麼辦？我所見過的例子似乎都使用絕對定位，但我希望它對於屏幕大小和大小/動態移動是動態的。

謝謝！

Answer 1

您可以使用CSS3 flexboxbox-direction: reverse;屬性。像這樣寫：

.flex{ 
    display: -moz-box; 
    -moz-box-orient:vertical; 
    -webkit-box-orient:vertical; 
    display: -webkit-box; 
    box-orient:vertical; 
    display:box; 
    width:100%; 
} 
.flex div, .header{ 
    border:1px solid red; 
    height:100px;  
} 


@media screen and (max-width : 400px){ 
    .flex{ 
    -moz-box-direction: reverse; 
    -webkit-box-direction: reverse; 
    box-direction: reverse; 
} 
} 

入住這http://jsfiddle.net/Hj5pz/

Answer 2

CSS無法重新排列HTML元素的順序，這就是在這種情況下使用絕對定位的原因。

或者，您可能需要隱藏一個以一種格式顯示而不在另一個格式中的部分副本，反之亦然。