bootstrap响应式列重置、列偏移、列嵌套、列排序

列重置清除浮动：

<div class="clearfix visible-xs"></div>

列偏移:

<div class="col-md-offset-*"></div>

列排序：

<div class="col-md-push/pull-*"></div>

列重置之清除浮动

在小型屏幕上，我们希望看到这种情况：



在超小型屏幕下我们希望看到这样的情况：



可是由于所有的col-样式都是左浮动的，可能出现这种情况:



在超小型屏幕（xs）的情况下，div3应该在下一行，但由于div1的内容比较长，所以div3直接浮动到了div2的下方。

这是由于没有清除浮动造成的，要解决这个问题，需要使用clearfix样式。

添加如下代码：

<div class="clearfix visible-xs"></div>

<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-6">div1内容多一些再多一些的时候</div>
<div class="col-sm-3 col-xs-6">div2</div>

<div class="clearfix visible-xs"></div>

<div class="col-sm-3 col-xs-6">div3</div>
<div class="col-sm-3 col-xs-6">div4</div>
</div>
</div>

列偏移

(1).col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。

(2)为了在大屏幕显示器上使用偏移，需要使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

例如：我们是用.col-md-offset-3 class来居中这个div

<div class="container">
<div class="row">
<h1>Hello World!</h1>
<div class="col-xs-6 col-md-offset-3">div1</div>
</div>
</div>

列嵌套

为了在内容中嵌套默认的网格

（1）添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。

（2）被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

<div class="container">
<div class="row">

<!--第一列-->
<div class="col-md-3">
<p>1.1</p>
</div>

<!--第二列，分为四个盒子-->
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<p>1.2.1</p>
</div>
<div class="col-md-6">
<p>1.2.2<br>多一点再多一点</p>
</div>
</div>

<div class="row">
<div class="col-md-6">
<p>1.2.3</p>
</div>
<div class="col-md-6">
<p>1.2.4</p>
</div>
</div>
</div>
</div>

列排序

可以通过改变 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。

<div class="container">
<div class="row">
<p>排序前</p>
<div class="col-md-4">我在左边</div>
<div class="col-md-8">我在右边</div>
</div>
<br>
<div class="row">
<p>排序后</p>
<div class="col-md-4 col-md-push-8">我在左边</div>
<div class="col-md-8 col-md-pull-4">我在右边</div>
</div>
</div>