如何在bootstrap中的较短列下包装列

Question

您好我正在尝试为大型设备在第一列（红色）下方包裹较短的列（蓝色），但要在移动设备上保留最后一列。 Bootstrap推拉似乎不起作用（可能是因为它包裹在两行上）。我也想过漂浮但是已经作为Bootstrap的一部分出现在div div上，它没有帮助。

这是一个带有div布局的bootply，适用于移动设备，但不适用于大屏幕：https://www.bootply.com/3WKeAukbz0

Answer 1

只需使用Bootstrap的pull-right类..

https://www.bootply.com/WARW7AOdQz

  <div class="row">
    <div class="col-sm-5 col-xs-12" style="height:200px; background-color:red;">text</div>
    <div class="col-sm-7 pull-right" style="height:500px; background-color:green;">text</div>
    <div class="col-sm-5 col-xs-12" style="height:100px; background-color:blue;">text</div>
  </div>

Answer 2

不幸的是，没有办法像在Bootstrap中那样堆叠div。但是你可以在css媒体查询的帮助下做到这一点。

HTML

<div class="row large-screen">
  <div class="col-xs-6">
    <div class="col-xs-12" style="height:200px; background-color:red;"></div>
     <div class="col-xs-12" style="height:100px; background-color:blue;"></div>
  </div>
  <div class="col-xs-6">
        <div class="col-xs-12" style="height:500px; background-color:green;"></div>
  </div>
</div>

<div class="row mobile-screen">
    <div class="col-xs-12" style="height:200px; background-color:red;"></div>
         <div class="col-xs-12" style="height:500px; background-color:green;"></div>
     <div class="col-xs-12" style="height:100px; background-color:blue;"></div>
</div>

CSS

@media screen and (max-width: 576px) {
    .large-screen {
      display: none;
    }
}

@media screen and (min-width: 577px) {
  .mobile-screen{
    display:none;
  }
}

https://jsfiddle.net/sfbtqt3j/

希望它有所帮助！