.row{position:relative;width:100%;padding:0;margin:0;}
.row [class^=col]{float:left;padding:0;margin:0;min-height:.125rem}
.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9{width:100%;}

.row::after{content:"";display:table;clear:both}
 
@media only screen and (min-width:45em){
    .col-1{width:8.33%}
    .col-2{width:16.66%}
    .col-3{width:25%}
    .col-4{width:33.33%}
    .col-5{width:41.66%}
    .col-6{width:50%}
    .col-7{width:58.33%}
    .col-8{width:66.66%}
    .col-9{width:75%}
    .col-10{width:83.33%}
    .col-11{width:91.66%}
    .col-12{width:100%}
}