使用css來完成此佈局

Question

我有一個響應式設計網站，有一個奇怪的佈局後，需要我重新排序一些項目的佈局的媒體查詢後更改：基本上我有4個部分，a，b，c，d 所以A是左列B是右列，c和d是它們自己的行在下面（*表示新行） * A |乙 * C * d 然後我需要把它重新排序爲4個DISTICT行順序 * A * C * B * d 我可以使用JavaScript jQuery來重新排序的東西，但寧願現在依靠因此，我正在尋找一個全部的CSS解決方案，PHP解決方案，最後如果所有的都不是Javascript/jQuery解決方案。

Answer 1

Here you go

HTML：

<div id="a"></div> 
<div id="b"></div> 
<div id="c"></div> 
<div id="d"></div>​ 

CSS

#a { background-color: #aaa; } 
#b { background-color: #bbb; } 
#c { background-color: #ccc; } 
#d { background-color: #ddd; } 

div { 
    height: 100px; 
    width: 100%; 
} 

@media 
    screen and (min-width: 420px) { 
    div { position: absolute; } 
    #a{ 
     width: 50%; 
    } 

    #b { 
     top: 100px; 
    } 

    #c { 
     left: 50%; 
     width: 50%; 
    } 

    #d { 
     top: 200px; 
    } 
} 
​