.cols2,
.cols3,
.cols4,
.cols5,
.cols6 {
    -js-display: flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    -ms-flex-pack: -ms-flex-start;
    justify-content: flex-start;
}

.cols2 {

}
.cols2 .col,
.cols3 .col,
.cols4 .col,
.cols5 .col,
.cols6 .col {
width: 100%;
}
@media only screen and (min-width: 375px) {

}
@media only screen and (min-width: 450px) {

}
@media only screen and (min-width: 500px) {
    .cols4 .col {width: 50%;}
}
@media only screen and (max-width: 599px) {

}
@media only screen and (min-width: 600px) {

    .cols2,
    .cols3,
    .cols4,
    .cols5,
    .cols6{
        -js-display: flex;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        -ms-flex-pack: -ms-flex-start;
        justify-content: flex-start;
    }
    .cols6 .col {width: 50%;}
}
@media only screen and (min-width: 700px) {

}
@media only screen and (min-width: 800px) {
    .cols6 .col {width: 33.33%;}
}
@media only screen and (min-width: 850px) {
    .cols2 .col{width: 50%;}
    .cols3 .col {width: 33.33%;}
    .cols4 .col {width: 25%;}
}
@media only screen and (min-width: 920px) {
    .cols6 .col {width: 16.66%;}
}
@media only screen and (min-width: 968px) {

}
@media only screen and (min-width: 1060px) {

}