引导推/拉 - 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; 
    } 
}