宽度可移动时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; 
} 
}