情境引入

假设一张页面的左部分有一个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>

最终效果

正常时

响应式