多个类选择器不应用属性

Question

所以我的上一个question被拒绝了，所以我会尝试更具体地说明这个。

我尝试使用 css 创建响应式网格之类的结构。我想要的是：

应该正常化 - 我将使用normalize css
 有Flex Box支持
 对大多数浏览器具有向后兼容性

我已经制作了4个imp类：

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 em> 以便我可以在不同的分辨率下组合多个宽度框。例如，这里是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代码段，行内的第一个div将是2个小型，4个中型和1个大屏幕尺寸。

问题：

＆＃13;

＆＃13;

*,
*: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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

上面的代码段包含完整的代码，运行正常，但它没有这样做。问题是，行类中的所有div都不是＆＃ 39;根据不同分辨率指定的类进行样式设置。事实上，他们正在随机拾取，比如第一个div只用col-2设置，第二个是好的，第三个只是一个类。我希望它们遵循正常行为，即在定义多个类时覆盖类属性。

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

Answer 1

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

在你的例子中; ＆＃34; COL-L-1＆＃34;先被声明然后在同一个媒体查询块中，你有＆＃34; .col-2＆＃34;定义然后覆盖＆＃34;大＆＃34;专栏的版本。

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

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

    .small-2 {
        width: 16.66667%;
    }

    // and so on

}

// then add you width-specific media queries

Answer 2

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

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

然后再次使用媒体查询中型和大型屏幕进行声明。

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

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

正确的方法如下：

＆＃13;

＆＃13;

*,
*: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;
}
}

＆＃13;

＆＃13;

＆＃13;