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

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

---

为了实现这种结构，您需要将第二个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>

@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;
  }
}