重新排序Div像源重新排序

Question

我正在使用兩個部門（兩個高度設置爲自動）。

現在，在移動視圖中，我希望左側視圖爲100％寬度，底部和右側視圖爲100％並位於頂部;怎麼能做到這一點？

如果我將margin-left:100%設置爲左側而margin-left:-100% to right則設置爲離屏，水平滾動條顯示在瀏覽器中。

這裏是 FIDDLE

Answer 1

下面是使用完全相同的HTML的例子。只有CSS正在改變，這可以通過媒體查詢完成。

html, body{ height:100%; width:100%; margin:0; padding:0 } 
 

 
#red{ 
 
    background:red; height:40%; width:50%; float:left; 
 
} 
 

 
#yellow{ 
 
    background:yellow; height:40%; width:50%; float:left; 
 
}

<div id="yellow"></div><div id="red"></div>

html, body{ height:100%; width:100%; margin:0; padding:0 } 
 

 
#red{ 
 
    background:red; height:40%; width:100%; 
 
} 
 

 
#yellow{ 
 
    background:yellow; height:40%; width:100%; 
 
}

<div id="yellow"></div><div id="red"></div>

編輯：使用，如果你希望它們翻轉下面的代碼。

html, body{ height:100%; width:100%; margin:0; padding:0 } 
 

 
#red{ 
 
    background:red; height:40%; width:100%; 
 
    position:relative; 
 
    top:-40%; 
 
} 
 

 
#yellow{ 
 
    background:yellow; height:40%; width:100%; 
 
    position:relative; 
 
    top:40%; 
 
}

<div id="yellow"></div><div id="red"></div>