Bootstrap推/拉 - Div未正确对齐

Question

所以我在md中有这个布局 -

___________________________________________________________________________
|             [1]       |            [2]             |          [3]       |
|                       |                            |                    |
|_______________________|                            |                    |
                        |                            |____________________|
                        |                            |
                        |                            |
                        |____________________________|

在xs和sm中，我希望结构是这样的 -

______________________________________________________
|             [1]       |            [2]             |
|                       |                            |
|_______________________|                            |
|           [3]         |                            |
|                       |                            |
|_______________________|                            |
                        |____________________________|

但我得到的结构是 -

______________________________________________________
|             [1]       |            [2]             |
|                       |                            |
|_______________________|                            |
                        |                            |
      (Empty  Space)    |                            |
                        |                            |
________________________|____________________________|
|           [3]         |
|                       |
|_______________________|

我该如何解决这个问题？

我的代码是这样的 -

<div class = "col-xs-5 col-sm-5 col-md-4"></div>
<div class = "col-xs-7 col-sm-7 col-md-4"></div>
<div class = "col-xs-5 col-sm-5 col-md-4"></div>

Answer 1

为了实现这种结构，您需要将第二个div拉到xs，sm和左边的md。bootstrap-pull-left-for-small-devices

此链接可以帮助您这样做..

所以，html将是

<div class="row">
  <div class = "col-xs-5 col-sm-5 col-md-4"></div>
  <div class = "col-xs-7 col-sm-7 col-md-4 pull-md-left pull-sm-right pull-xs-right"></div>
  <div class = "col-xs-5 col-sm-5 col-md-4"></div>
</div>

和CSS将是

@media (max-width: 767px) {
  .pull-xs-right {
      float: right;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .pull-sm-right {
      float: right;
  }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .pull-md-right {
      float: right;
  }
}