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。 自舉，拉左的小裝置

此鏈接將幫助您這樣做。

因此，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;
  }
}