Div在自举3中以不相等的高度重新排序

Question

我知道这个问题可能有重复，但我找不到适合我的问题所需的解决方案。

我的布局需要从下面的中画面重新排序。

大屏幕。 当它检测到屏幕中等或低于此时，我就这样想了

我使用bootstrap 3，这是我的HTML布局

<div class="row padding-none">
   <div class="col-lg-3 padding-none">
   </div>
   <div class="col-lg-9">
  <div class="row padding-none">
           <div class="col-lg-10">
           </div>
           <div class="col-lg-2">
           </div>
      </div>
   </div>
</div>

我已经查阅了关于push pull的bootstrap文档，但我无法让它工作。我只希望黑色和橙色在中等屏幕及以下屏幕上切换位置。

对不起大空间，我不能删除。 :)谢谢。

Answer 1

您可以通过将橙色部分放在第一位，将黑色部分放在标记中的第二位来实现此目的。然后将float:right添加到两者，以便它可视地交换位置。您可以使用media queries定位不同的媒体，并删除较小媒体的float: right。 您也可以check here。

<div class="container">
 <div class="row padding-none">
    <div class="col-lg-3 padding-none grey">section1</div>
    <div class="col-lg-9">
        <div class="row padding-none">
            <div class="col-lg-2 orange">section 3</div>
            <div class="col-lg-10 black">section 2</div>
        </div>
    </div>
 </div>
</div>

CSS

.orange, .black {
    float:right;
}
@media(max-width:767px) {
    .orange, .black {
        float: none
    }
}
@media(min-width:768px) {
    .orange, .black {
        float: none
    }
}
@media(min-width:992px) {
    .orange, .black {
        float: none
    }
}
@media(min-width:1200px) {
    .orange, .black {
        float: right
    }
}

See Demo