CSS-獲取100％寬度div以包裝在另一個[jsfiddle]

在響應式佈局中，我有兩列。左欄是側欄，右欄是內容。CSS-獲取100％寬度div以包裝在另一個[jsfiddle]

使用媒體查詢，當屏幕寬度很小時，列變爲100％寬度並堆疊在彼此之上。

在這種情況下，我希望邊欄（第一個div）出現在內容下面（第二個div）。

我嘗試在小屏幕上使用float: right，一旦它達到100％，但在100％寬度時，浮動顯然無所謂。

.left, .right { 
    width: 100%; 
    float: left; 
    background: green; 
} 
.left { 
    float: right; 
    background: red; 
} 
.half { 
    width: 50%; 
} 
.space { 
    width: 100%; 
    display: block; 
    height: 40px; 
}

在頁面上：

<div class="left half"> <!-- To mimic full screen size --> 
Left 
</div> 
<div class="right half"> 
Right 
</div> 

<div class="space"></div> 

<div class="left"> <!-- To mimic small screen size --> 
Left 
</div> 
<div class="right"><!-- This should appear first --> 
Right 
</div>

這裏是小提琴：https://jsfiddle.net/ph09frvw/

我敢肯定，這是不是第一次有人想包下的內容側邊欄，我只是無法找到解決方案。

來源

2016-04-11 JROB

在Bootstrap中完成的東西http://stackoverflow.com/questions/20979062/bootstrap-right-column-on-top-on-mobile-view – kakurala

您可以使用display: flex並使用order屬性來更改<div>元素的順序。雖然浮動可以是水平排列的幫助，這將是垂直取向一點幫助，下面是一個例子：

.flex { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
.left { 
 
    order: 2; 
 
    flex: 1 0 50%; 
 
    background: red; 
 
} 
 
.right { 
 
    order: 1; 
 
    flex: 1 0 50%; 
 
    background: green; 
 
} 
 
.full { 
 
    margin-top: 20px; 
 
} 
 
.full > .left, 
 
.full > .right { 
 
    flex: 1 0 100%; 
 
}

<div class="flex"> 
 
    <div class="left"> 
 
    Left 
 
    </div> 
 
    <div class="right"> 
 
    Right 
 
    </div> 
 
</div> 
 

 
<div class="flex full"> 
 
    <div class="left"> 
 
    Left 
 
    </div> 
 
    <div class="right"> 
 
    Right 
 
    </div> 
 
</div>

來源

2016-04-11 13:51:17