bootstrap 針對超小屏幕和中等屏幕設備定義的不同的類

注意：bootstrap不支持IE8，需要下載Respond.js激活media query支持。

另外使用Respond.js還有跨域的問題，所以建議把 Respond.js 和網站目錄放在一起。

根據移動端和電腦端屏幕不同大小，針對不同屏幕下占不同比例

<div class="container">
    <!-- <div class="row">
        <div class="col-xs-3 bg-info">1</div>
        <div class="col-xs-3 bg-info">2</div>
        <div class="col-xs-3 bg-info">3</div>
        <div class="col-xs-3 bg-info">4</div>
    </div> -->
    <div class="row">
        <div class="col-md-4 col-lg-2 bg-info">在lg屏幕下占2:2:8</div>
        <div class="col-md-4 col-lg-2 bg-info">在md屏幕下占4:4:4</div>
        <div class="col-md-4 col-lg-8 bg-info">在sx屏幕下占12:12:12</div>
    </div>
    <br>

    <div class="row">
        <div class="col-xs-6 col-md-3 bg-info">在md及以上屏幕中占比3:4:5</div>
        <div class="col-xs-6 col-md-4 bg-info">在sx屏幕下占6:6:6</div>
        <div class="col-xs-6 col-md-5 bg-info">sx屏幕下共18份，多余被擠下來</div>
    </div>
    <br>

    <div class="row">
        <div class="col-xs-12 bg-info col-sm-6 col-md-8">xs占比12:1 sm占比6:6 md占比8:4</div>
        <div class="col-xs-6  bg-info col-md-4">xs占比12:1 sm占比6:6 md占比8:4</div>
    </div>
    <br>

    <div class="row">
        <div class="col-xs-6  bg-info col-sm-4">xs占比6:6:6 sm占比4:4:4</div>
        <div class="col-xs-6  bg-info col-sm-4">xs占比6:6:6 sm占比4:4:4</div>
        <div class="col-xs-6  bg-info col-sm-4">xs占比6:6:6 sm占比4:4:4</div>
    </div>
    <br>

    <div class="row">
        <div class="col-xs-6  bg-info col-sm-4">xs占比6:6:12 sm占比4:4:4</div>
        <div class="col-xs-6  bg-info col-sm-4">xs占比6:6:12 sm占比4:4:4</div>
        <div class="col-xs-12 bg-info col-sm-4">xs占比6:6:12 sm占比4:4:4</div>
    </div>
</div>