bootstrap 媒体查询

 //各类设备的分辨率
 /*超小设备（手机，小于768px)*/
  /* Bootstrap 中默认情况下没有媒体查询 */
 /*超小型设备（小于768px）*/
 @media (min-width:@screen-xs-min){...}
  /*小型设备（平板电脑，768px起）*/
 @media (min-width:@screen-sm-min){...}
  
  /*中型设备（台式电脑，992px起）*/
 @media (min-width:@screen-md-min){...}
 
 /*大型设备（大台式电脑，1200px起）*/
 @media (min-width:@screen-lg-min){...}

@media only screen and (max-width:768px){ //意思是在屏幕宽度小于768px时
//这里写想要在小屏幕里实现的样式
}

使用bootsrap时，在想要使用的块元素上添加类如 ：

在大型设备显示1/6列、中型设备显示1/3列、小型设备（ipad）显示1/2列、超小型设备显示1列，添加

<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12"></div>

偏移列

大屏幕上使用偏移：.col-md-offset-*类，左外边距增加*列（其中*范围是1-11）

列排序

.col-md-push-* 和 .col-md-pull-* 类，互换两列的顺序