第三行：6和6虽然是大尺寸因为只有这一个样式，也是平均分成两份。
现在就是页面屏幕小于一定程度的时候，针对每个元素进行重新选择样式类。现在真对前两个.row选择的都是col-xs-*。
所以：
第一行：两个元素分为12和6，而一行呢就是12份，所以第二个元素会进行换行，然后占据6份一半的位置。
第二行：3个6份。而一行呢就是12份。所以第三个元素会进行换行，然后占据6份一般的位置。
Responsive column resets
通过上面两个案例的解析，可以通过这四个栅格class设计出比较轻松的设计出比较复杂的页面布局了。但是还是会有一些情况中出现一行中的某一列比其他的列高的情况。可能现在你还不太清楚我说的意思，不过没关系，我们直接上案例。
复制代码
<div class=”page-header”>
<h1>案例:Responsive column resets</h1>
</div>
<div class=”row”>
<div class=”col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3(通过调整浏览器的宽度或在手机上即可查看这些案例的实际效果。)</div>
<div class=”col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
<div class=”col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
<div class=”col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
</div>
首先来看一下大屏幕下的页面展示效果
第一个元素的高度的确不太一样。然后看一下小屏幕的。
看现在是这样进行排列的，因为小屏幕下选择的都是.col-xs-*的样式类，而且都是占用6份的。不知道这样的效果是不是你想要的。原来是不是想在小屏幕下看到这四个元素在两行然后每行两个元素呢？
接下来我们将上面的代码稍微改动一下，其实也就是添加了一行代码
复制代码
<div class=”page-header”>
<h1>案例:Responsive column resets</h1>
</div>
<div class=”row”>
<div class=”col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3(通过调整浏览器的宽度或在手机上即可查看这些案例的实际效果。)</div>
<div class=”col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
<div class=”clearfix visible-xs”></div>
<div class=”col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
<div class=”col-xs-6 col-sm-3″>.col-xs-6 .col-sm-3</div>
</div>
