情境引入
假设一张页面的左部分有一个col-md-8的栏目,右侧有一个col-md-4的侧边栏。在响应式布局时,常常需要将侧边栏放置在col-md-8的上方,于是就可以引出下列代码:
<div class="col-md-4"></div>
<div class="col-md-8"></div>
但是,由此将会导致一个问题:在正常显示时col-md-4的侧边栏将在col-md-8的左侧!
问题解决
为了解决这一问题,BootStrap提供了push和pull两种列排序的方式。那col-md来说,将一个col向右移动称为col-md-push-,向左移动称为col-md-pull-:
<div class="col-md-4 col-md-push-8">.col-md-4</div>
<div class="col-md-8 col-md-pull-4">.col-md-8</div>