06-不同屏幕设置不同的列

大家想想，大屏幕和小屏幕的区别是什么。

我们可以给row里面的列设置多个col-–，比如：

<div class="col-md-2 col-xs-2">
<div class="col-md-2 col-xs-2 col-lg-2">Code language: JavaScript (javascript)

意思就是，在中等屏幕这一部分占2列，在小屏幕也是占2列。

每个div我们叫它”部分”，不要叫”列”。

有些时候超了12列也是必要的：

<div class="container">
	<div class="row show-grid">
	  <div class="col-md-2 col-xs-6">
		<img src="d5fff1b44aed2e733f4ef0b98b01a18b86d6fa02.jpg" style="width:100%;"/>
	  </div>
	  <div class="col-md-2  col-xs-6">
		<img src="d5fff1b44aed2e733f4ef0b98b01a18b86d6fa02.jpg" style="width:100%;"/>
	  </div>
	  <div class="col-md-2  col-xs-6">
		<img src="d5fff1b44aed2e733f4ef0b98b01a18b86d6fa02.jpg" style="width:100%;"/>
	  </div>
	  <div class="col-md-2  col-xs-6">
		<img src="d5fff1b44aed2e733f4ef0b98b01a18b86d6fa02.jpg" style="width:100%;"/>
	  </div>
	  <div class="col-md-2  col-xs-6">
		<img src="d5fff1b44aed2e733f4ef0b98b01a18b86d6fa02.jpg" style="width:100%;"/>
	  </div>
	  <div class="col-md-2  col-xs-6">
		<img src="d5fff1b44aed2e733f4ef0b98b01a18b86d6fa02.jpg" style="width:100%;"/>
	  </div>
	</div>			
</div>Code language: HTML, XML (xml)