不久之前，我们只是为PC做页面。比如经典的左中右结构网页布局就可以使用bootstrap直接搞定：
<nav class="container">
<section class="row">
<div class="col-md-2">
left
</div>
<div class="col-md-8">
middle
</div>
<div class="col-md-2">
right
</div>
</section>
</nav>
在进一步解释之前，我们首先背下来一个事实：bootstrap布局系统会把每个屏划分为12等分。并提供划分这个等分的方法。
然后继续。每个.container的容器内都可以加入.row作为行，在行内通过col-md-来指定划分每个子元素的占据宽度。解释下col-md- :
col-md-*采用连字符分为三个部分，第一部分都是col，标识列
第二部分标识屏幕大小。md标识middle（中等屏幕大小）
最后一部分是一个在12内的数字，它表示在总宽度下，当前元素占据的比例。比如col-md-2指定为2/12，col-md-8标识占据8/12。
这段代码的含义，换成白话就是：在中等屏幕大小的情况下，三个div块分别占据当前行总宽度的2/12、8/12、2、12。
屏幕大小使用代号，全面屏幕和代号列表如下：
屏 代号 范围
大屏幕 lg 大于等于1200px
中等屏 md 宽度在992px和1200px之间
小屏幕 sm 宽度大于768px和992px之间
超小屏 xs 宽度小于768px
所以，几个屏幕大小的临界点值为768px、992px、1200px。
这个左中右结构，在小屏情况下就会显得太挤了（比如ipad的竖屏情况下屏宽刚刚好768px）。此时我希望把前两个div占据一行，分别占据3/12、9/12 ,第3个div放到下一行。怎么办？只要使用col-sm-*来指定比例即可：
<nav class="container">
<section class="row">
<div class="col-sm-3 col-md-2">
left
</div>
<div class="col-sm-9 col-md-8">
middle
</div>
<div class="col-sm-12 col-md-2">
right
</div>
</section>
</nav>
就是说，在小屏幕的情况下，第一个div占据第一行的3/12，第二个div占据第一行的9/12，第三个div占据下一个的12/12。
如何验证这样做的效果确实是如我的期望呢？现在隆重请出chrome devtools。只要：
打开devtools
点击toggle device toolbar
就可以打开页面，它会在原来的页面上方加入一行，显示responsible的下拉菜单以及设备的宽度和高度输入框。我们可以在设备宽度输入框内填写我们想要的设备宽度。并使用768px、992px做边界值测试。
当输入768px时，此时为小屏幕，页面输出如期望的分为2行。
当输入769px时，此时为小屏幕，页面输出如期望的分为2行。
当输入767px时，此时为超小屏幕，页面输出如期望的分为3行。
当输入992px时，此时为中等屏幕，页面输出如期望的分为1行。
当输入1200px时，此时为超大屏幕，因为并没有定义超大屏幕下的占据比例，它会沿用上一级屏幕的定义，也就是中等屏幕的定义，页面输出如期望的依然为1行。
成了。我们的页面可以因应屏幕的大小而显示不同的页面组合。这就是响应式编程了。
