如何將右邊的div移到左邊div content

我有兩個div，一個主要的左邊內容和一個右邊。隨着媒體查詢（屏幕變小），我希望左側內容div向下移動並允許右側div移動到上方。如何將右邊的div移到左邊div content

這裏是我目前有...

HTML：

<div id="content">content</div> 
    <div id="aside">aside</div>

CSS：

#content { 
    color:white; 
    width:70%; 
    background: #111; height: 100px; 
    position:inline; 
    float:left;} 

    #aside { 
    float: right; 
    background: #CCC; height: 100px;width: 100px;} 

    @media screen and (max-width: 500px){ 
    #content { 
    width: 100%; 
    margin-left: 0px; 
    clear: both; 
    }}

在這裏看到：https://jsfiddle.net/kaveman71/n55444ca/1/

目前，當尺寸調小時，旁邊的div移動到內容div（每平常）以下，但我希望相反的情況發生;旁邊的div應該移到左邊的內容div的上方（而不是字面上）。

所以當調整大小時，結果應該是灰色邊框彈出高於的黑色內容框。

有沒有辦法用CSS做到這一點？或者我需要訴諸JavaScript？如果JS是唯一的方法，任何人都可以提供一個例子嗎？

感謝，

來源

2015-05-20 Redink

非常感謝@埃克托E＆亞歷克斯·懷特！亞歷克斯，如果你比赫克託早一分鐘，我可以標記你的名字是正確的，但事實上，赫克託的建議足以達到預期的結果。非常感謝！ – Redink

如果必須保持HTML順序（因爲沒有人會讓你改變它，或者因爲在主要內容之前沒有語義意義），其他解決方案是[CSS flexbox]（https://css-tricks.com/snippets/css/a-guide-to -flexbox /）和第二個元素（IE10 +和IE8 +）上有點駭人的「display：table-caption」 – FelipeAls

如果反轉的div的順序，因爲他們的立場全屏由CSS定義的，它應該放在一邊在內容上的調整。

<div id="aside">aside</div> 
<div id="content">content</div>

來源

2015-05-20 18:50:25

首先想到的是首先放在HTML內容順序中。

<div id="aside"></div> 
<div id="content"></div>

默認情況下，旁邊將位於content div的頂部。

然後，媒體查詢，你可以把內容的一邊左側，使用類似：

@media (min-width: 500px) { 
    #content { 
     float: left; 
     width: 70%; 
    } 
    #aside { 
     float: right; 
     width: 100px 
    } 

}

來源

2015-05-20 18:50:55

如何將右邊的div移到左邊div content

回答

相關問題