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

列重置清除浮动：

列偏移:

列排序：

列重置之清除浮动
在小型屏幕上，我们希望看到这种情况：

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

---

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

在超小型屏幕（xs）的情况下，div3应该在下一行，但由于div1的内容比较长，所以div3直接浮动到了div2的下方。
这是由于没有清除浮动造成的，要解决这个问题，需要使用clearfix样式。
添加如下代码：

    

		
div1内容多一些再多一些的时候
		
div2
		
		

		
		
div3
		
div4
	

---

列偏移
(1).col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。
(2)为了在大屏幕显示器上使用偏移，需要使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
例如：我们是用.col-md-offset-3 class来居中这个div

	    

			
Hello World!
			
div1
	 
		
    

---

列嵌套
为了在内容中嵌套默认的网格
（1）添加一个新的 .row，并在一个已有的 .col-md-* 列内添加一组 .col-md-* 列。
（2）被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。

		

		
			
		    

				
1.1
			

			
			

				

					

						
1.2.1
					
					

						
1.2.2
多一点再多一点
					
				

				

					

						
1.2.3
					
   
					

						
1.2.4
					
				
		
	

---

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

	

		
排序前
		
我在左边
		
我在右边
	
		
	
		
	

		
排序后
		
我在左边
		
我在右边