多个类选择器不应用属性

Question

所以我的最后一个question 被否决了，所以我会尝试更具体地说明这一点。

我正在尝试使用 css 创建一个类似响应式网格的结构。我想要的是：

应该规范化 - 我将使用规范化 css
支持 Flex Box
向后兼容大多数浏览器

我已经制作了 4 个小鬼类：

row : using it as wrapper( width:100% ) for my columns.
col-x : x=(1-12) width 100% at small , and width 100*x/12 at medium and large.
col-m-x : x=(1-12) width 100*x/12 at medium , and is defined at medium only. 
col-l-x : x=(1-12) width 100*x/12 at large , and is defined at large only.

我已经为 m 和 l 定义了 col 这样我就可以以不同的分辨率组合多个宽度框。例如，这里是 html：

<div class="row header">
        <div class="col-2 col-m-4 col-l-1 spoons"></div>
        <div class="col-2 col-m-1 col-l-3 spoons"></div>
        <div class="col-2 col-m-1 col-l-1 spoons"></div>
        <div class="col-2 col-m-1 col-l-2 spoons"></div>
        <div class="col-2 col-m-1 col-l-2 spoons"></div>
        <div class="col-2 col-m-4 col-l-3 spoons"></div>
    </div>

根据上面的 html sn-p ，行内的第一个 div 将是 2 in small ， 4 in medium 和 1 in large screen size 。

问题：

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  font-size: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
/* Rows and clearfix */

.row:after {
  content: " ";
  display: table;
  clear: both;
}
.row {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-box-align: start;
  -moz-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
/* Columns */

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
  float: left;
  width: 100%;
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1 1 100%;
  -ms-flex: 1 1 100%;
  flex: 1 1 100%;
  -webkit-align-self: flex-start;
  -ms-flex-item-align: start;
  align-self: flex-start;
  padding: 2px;
}
/* Or I can do [class^='col-'] {
  float: left;
} */

/* Columns */

.hide {
  display: none;
}
.r-img {
  max-width: 100%;
  height: auto;
  display: block;
}
@media screen and (min-width: 48em) {
  /* mid devices*/
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12,
  .col-m-1,
  .col-m-2,
  .col-m-3,
  .col-m-4,
  .col-m-5,
  .col-m-6,
  .col-m-7,
  .col-m-8,
  .col-m-9,
  .col-m-10,
  .col-m-11,
  .col-m-12 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    padding: 0;
  }
  .col-1,
  .col-m-1 {
    width: 8.3333%;
    -webkit-flex: 1 1 8.3333%;
    -ms-flex: 1 1 8.3333%;
    flex: 1 1 8.3333%;
  }
  .col-2,
  .col-m-2 {
    width: 16.6666%;
    -webkit-flex: 1 1 16.6666%;
    -ms-flex: 1 1 16.6666%;
    flex: 1 1 16.6666%;
  }
  .col-3,
  .col-m-3 {
    width: 25%;
    -webkit-flex: 1 1 25%;
    -ms-flex: 1 1 25%;
    flex: 1 1 25%;
  }
  .col-4,
  .col-m-4 {
    width: 33.3333%;
    -webkit-flex: 1 1 33.3333%;
    -ms-flex: 1 1 33.3333%;
    flex: 1 1 33.3333%;
  }
  .col-5,
  .col-m-5 {
    width: 41.6666%;
    -webkit-flex: 1 1 41.6666%;
    -ms-flex: 1 1 41.6666%;
    flex: 1 1 41.6666%;
  }
  .col-6,
  .col-m-6 {
    width: 50%;
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
  }
  .col-7,
  .col-m-7 {
    width: 58.3333%;
    -webkit-flex: 1 1 58.3333%;
    -ms-flex: 1 1 58.3333%;
    flex: 1 1 58.3333%;
  }
  .col-8,
  .col-m-8 {
    width: 66.6666%;
    -webkit-flex: 1 1 66.6666%;
    -ms-flex: 1 1 66.6666%;
    flex: 1 1 66.6666%;
  }
  .col-9,
  .col-m-9 {
    width: 75%;
    -webkit-flex: 1 1 75%;
    -ms-flex: 1 1 75%;
    flex: 1 1 75%;
  }
  .col-10,
  .col-m-10 {
    width: 83.3333%;
    -webkit-flex: 1 1 83.3333%;
    -ms-flex: 1 1 83.3333%;
    flex: 1 1 83.3333%;
  }
  .col-11,
  .col-m-11 {
    width: 91.6666%;
    -webkit-flex: 1 1 91.6666%;
    -ms-flex: 1 1 91.6666%;
    flex: 1 1 91.6666%;
  }
  .col-12,
  .col-m-12 {
    width: 100%;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
  }
  .hide-m {
    display: none;
  }
}
@media screen and (min-width: 64em) {
  /* lg devices */
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12,
  .col-l-1,
  .col-l-2,
  .col-l-3,
  .col-l-4,
  .col-l-5,
  .col-l-6,
  .col-l-7,
  .col-l-8,
  .col-l-9,
  .col-l-10,
  .col-l-11,
  .col-l-12 {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    padding: 0;
  }
  .col-1,
  .col-l-1 {
    width: 8.3333%;
    -webkit-flex: 1 1 8.3333%;
    -ms-flex: 1 1 8.3333%;
    flex: 1 1 8.3333%;
  }
  .col-2,
  .col-l-2 {
    width: 16.6666%;
    -webkit-flex: 1 1 16.6666%;
    -ms-flex: 1 1 16.6666%;
    flex: 1 1 16.6666%;
  }
  .col-3,
  .col-l-3 {
    width: 25%;
    -webkit-flex: 1 1 25%;
    -ms-flex: 1 1 25%;
    flex: 1 1 25%;
  }
  .col-4,
  .col-l-4 {
    width: 33.3333%;
    -webkit-flex: 1 1 33.3333%;
    -ms-flex: 1 1 33.3333%;
    flex: 1 1 33.3333%;
  }
  .col-5,
  .col-l-5 {
    width: 41.6666%;
    -webkit-flex: 1 1 41.6666%;
    -ms-flex: 1 1 41.6666%;
    flex: 1 1 41.6666%;
  }
  .col-6,
  .col-l-6 {
    width: 50%;
    -webkit-flex: 1 1 50%;
    -ms-flex: 1 1 50%;
    flex: 1 1 50%;
  }
  .col-7,
  .col-l-7 {
    width: 58.3333%;
    -webkit-flex: 1 1 58.3333%;
    -ms-flex: 1 1 58.3333%;
    flex: 1 1 58.3333%;
  }
  .col-8,
  .col-l-8 {
    width: 66.6666%;
    -webkit-flex: 1 1 66.6666%;
    -ms-flex: 1 1 66.6666%;
    flex: 1 1 66.6666%;
  }
  .col-9,
  .col-l-9 {
    width: 75%;
    -webkit-flex: 1 1 75%;
    -ms-flex: 1 1 75%;
    flex: 1 1 75%;
  }
  .col-10,
  .col-l-10 {
    width: 83.3333%;
    -webkit-flex: 1 1 83.3333%;
    -ms-flex: 1 1 83.3333%;
    flex: 1 1 83.3333%;
  }
  .col-11,
  .col-l-11 {
    width: 91.6666%;
    -webkit-flex: 1 1 91.6666%;
    -ms-flex: 1 1 91.6666%;
    flex: 1 1 91.6666%;
  }
  .col-12,
  .col-l-12 {
    width: 100%;
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
  }
  .hide-l {
    display: none;
  }
}
.header {
  border: 1px solid #f52b63;
  background: #e6ae27;
}
.spoons {
  border: 1px solid #2b90f5;
  background: #3ad4b5;
  height: 100px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet" />

<div class="row header">
        <div class="col-2 col-m-4 col-l-1 spoons"></div>
        <div class="col-2 col-m-1 col-l-3 spoons"></div>
        <div class="col-2 col-m-1 col-l-1 spoons"></div>
        <div class="col-2 col-m-1 col-l-2 spoons"></div>
        <div class="col-2 col-m-1 col-l-2 spoons"></div>
        <div class="col-2 col-m-4 col-l-3 spoons"></div>
</div>

上面的代码 sn-p 包含整个代码，应该可以正常运行，但它没有这样做。问题是，行类中的所有 div 都没有根据样式设置样式到以不同分辨率指定的类。事实上，他们是随机选择的，比如第一个 div 只用 col-2 设计，第二个很好，第三个又是一个班级。我希望他们遵循正常行为，即在定义多个类时覆盖类属性。

这是 Firefox 的 Inspect Element 对话框的屏幕截图，说明了上述情况。

Answer 1

我改天解决了这个问题，问题的根本原因是我在媒体查询中声明类的方式。 col-x 类首先声明如下：

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,...{...}

然后再次声明中型和大屏幕的媒体查询。

.col-2.col-m-2{....}

这使得它们在某些情况下覆盖了以前的 css 规则，因为 col-x 被再次定义。

正确的做法如下：

*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
font-size: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* Rows and clearfix */
.row:after {
content: " ";
display: table;
clear: both;
}
.row {
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: start;
-moz-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;
-webkit-box-align: start;
-moz-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
/* Columns */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
float: left;
width: 100%;
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 2px;
}
.col-nr-1,
.col-nr-2,
.col-nr-3,
.col-nr-4,
.col-nr-5,
.col-nr-6,
.col-nr-7,
.col-nr-8,
.col-nr-9,
.col-nr-10,
.col-nr-11,
.col-nr-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-nr-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-nr-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-nr-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-nr-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-nr-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-nr-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-nr-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-nr-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-nr-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-nr-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-nr-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-nr-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
/* Or I can do [class^='col-'] {
float: left;
} */
/* Columns */
.hide {
display: none;
}
.r-img {
max-width: 100%;
height: auto;
display: block;
}
@media screen and (min-width: 48em) {
/* mid devices*/
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-m-1,
.col-m-2,
.col-m-3,
.col-m-4,
.col-m-5,
.col-m-6,
.col-m-7,
.col-m-8,
.col-m-9,
.col-m-10,
.col-m-11,
.col-m-12
{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-3{
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.col-m-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-m-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-m-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-m-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-m-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-m-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-m-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-m-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-m-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-m-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-m-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-m-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.hide-m {
display: none;
}
}
@media screen and (min-width: 64em) {
/* lg devices */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-l-1,
.col-l-2,
.col-l-3,
.col-l-4,
.col-l-5,
.col-l-6,
.col-l-7,
.col-l-8,
.col-l-9,
.col-l-10,
.col-l-11,
.col-l-12
{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
-webkit-order: 0;
-ms-flex-order: 0;
order: 0;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-align-self: flex-start;
-ms-flex-item-align: start;
align-self: flex-start;
padding: 0;
}
.col-1{
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-3{
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-5{
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-6{
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-8{
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-9{
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-10{
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-11{
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.col-l-1 {
width: 8.3333%;
-webkit-flex: 1 1 8.3333%;
-ms-flex: 1 1 8.3333%;
flex: 1 1 8.3333%;
}
.col-l-2 {
width: 16.6666%;
-webkit-flex: 1 1 16.6666%;
-ms-flex: 1 1 16.6666%;
flex: 1 1 16.6666%;
}
.col-l-3 {
width: 25%;
-webkit-flex: 1 1 25%;
-ms-flex: 1 1 25%;
flex: 1 1 25%;
}
.col-l-4 {
width: 33.3333%;
-webkit-flex: 1 1 33.3333%;
-ms-flex: 1 1 33.3333%;
flex: 1 1 33.3333%;
}
.col-l-5 {
width: 41.6666%;
-webkit-flex: 1 1 41.6666%;
-ms-flex: 1 1 41.6666%;
flex: 1 1 41.6666%;
}
.col-l-6 {
width: 50%;
-webkit-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
.col-l-7 {
width: 58.3333%;
-webkit-flex: 1 1 58.3333%;
-ms-flex: 1 1 58.3333%;
flex: 1 1 58.3333%;
}
.col-l-8 {
width: 66.6666%;
-webkit-flex: 1 1 66.6666%;
-ms-flex: 1 1 66.6666%;
flex: 1 1 66.6666%;
}
.col-l-9 {
width: 75%;
-webkit-flex: 1 1 75%;
-ms-flex: 1 1 75%;
flex: 1 1 75%;
}
.col-l-10 {
width: 83.3333%;
-webkit-flex: 1 1 83.3333%;
-ms-flex: 1 1 83.3333%;
flex: 1 1 83.3333%;
}
.col-l-11 {
width: 91.6666%;
-webkit-flex: 1 1 91.6666%;
-ms-flex: 1 1 91.6666%;
flex: 1 1 91.6666%;
}
.col-l-12 {
width: 100%;
-webkit-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
}
.hide-l {
display: none;
}
}

Answer 2

问题是您在媒体查询特定类之后定义 col-x。

在你的例子中；首先声明“col-l-1”，然后在定义了“.col-2”的同一个媒体查询块中声明，然后覆盖列的“大”版本。

最好将所有基类放在不基于宽度的媒体查询中，如下所示，然后添加中型和大型网格类，当达到最小宽度时，它们将覆盖默认类：

@media only screen {
    .small-1 {
        width: 8.33333%;
    }

    .small-2 {
        width: 16.66667%;
    }

    // and so on

}

// then add you width-specific media queries