引导推/拉 - Div 未正确对齐答案

【问题标题】：Bootstrap push/pull - Div not aligned properly引导推/拉 - Div 未正确对齐
【发布时间】：2014-12-17 10:17:48
【问题描述】：

所以我在 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>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap-3

【解决方案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;
  }
}

【讨论】：