寬度可移動時div的定位/ ipad尺寸

Question

我以jsfiddle爲例。

<div class="col-md-8" style="background-color:lavender;">COL-MD-8</div> 
<div class="col-md-4" style="background-color:lavenderblush;">COL-MD-4</div> 

當屏幕的寬度寬，兩者的div是海誓山盟的旁邊，這是它應該是什麼樣子等。但是當屏幕寬度很窄時，「col-md-4」會跳到另一個下面，我想在寬度較窄的「col-md-8」上面。我怎麼能做到這一點？

因此，當寬度很寬時，它應該在col-md-8的右側站點上，但是在其他div上方而不是在底部時窄。

Answer 1

<div class="row"> 
    <div class="col-md-4 col-md-push-8 col-xs-12">first</div> 
    <div class="col-md-8 col-md-pull-4 col-xs-12">second</div> 
</div> 

這樣的 「第一」 將被定位在大屏幕的行的第二部分，而它會在小的上面。

Answer 2

您可以切換兩個div，然後在您的col-md-4上應用float：right。當你達到很小的寬度時，你只需要刪除浮動。即：

HTML：

<div class="col-md-4 large_right" style="background-color:lavenderblush;">COL-MD-4</div> 
<div class="col-md-8" style="background-color:lavender;">COL-MD-8</div> 

CSS：

@media (min-width: 992px) { 
.large_right { 
float: right; 
} 
}