学习响应式布局中遇到的问题

不理解把多个css样式给一个html代码是什么意思？
html代码：

<div class="col-md-3 col-mx-3">
            <div class="back"></div>
        </div>
        <div class="col-md-6 col-mx-6">
            <div class="back"></div>
        </div>
        <div class="col-md-3 col-mx-3">
            <div class="back"></div>
        </div>

css代码：
@media (min-width: 768px){/最小值大于这个宽度，执行这个样式/

            .col-md-1{
            width: 8.33333333%;
           }
            .col-md-2{
            width: 16.66666666%;
           }
            .col-md-3{
            width: 25%;
           }
            .col-md-4{
            width: 33.3333333333%;
           }
            .col-md-5{
            width: 41.666666666%;
           }
            .col-md-6{
            width: 50%;
           }
        }
        @media (max-width: 768px){
            .col-mx-1{
            width: 8.33333333%;
            }
            .col-mx-2{
            width: 16.66666666%;
            }
            .col-mx-3{
            width: 25%;
            }
            .col-mx-4{
            width: 333333333333%;
            }
            .col-mx-5{
            width: 41.666666666%;
            }
            .col-mx-6{
            width: 50%;
            }
            .col-mx-8{
            width: 66.66666666%;
            }
            .col-mx-12{
            width: 100%;
            }
            .row:before, .row:after {
                display: table;
                content: '';
                clear: both;
            }
        }

---

你这个例子就是不同的分辨率，用不同的css，就需要写多个

---

什么叫CSS ==> 层叠样式表

层叠就是不同的属性会合并，相同的属性，后面的会覆盖前面的。

为啥添加两个class，利用media查询，进行特定条件下的样式覆盖。对于bootstrap，以移动有先，啥叫移动优先，就是小屏幕优先，所以。。。。。

---

例子中是使用css3的media属性，实现不同的屏幕宽度下执行不同的样式表来达到适应变化的效果。