.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}
.wrapper {
    background: silver;
    width: calc(100% - 20px);
    margin: 10px;
    min-height: 50px;
    overflow: auto;
    clear: both;
}
/* 1/12 = 0.0833 */
@media (max-width: 799px) {
    .smcol1 { width: calc(8.33% - 2%) }
    .smcol2 { width: calc(16.66% - 2%) }
    .smcol3 { width: calc(24.99% - 2%) }
    .smcol4 { width: calc(33.32% - 2%) }
    .smcol5 { width: calc(41.65% - 2%) }
    .smcol6 { width: calc(49.98% - 2%) }
    .smcol7 { width: calc(58.31% - 2%) }
    .smcol8 { width: calc(66.64% - 2%) }
    .smcol9 { width: calc(74.97% - 2%) }
    .smcol10 { width: calc(83.33% - 2%) }
    .smcol11 { width: calc(91.63% - 2%) }
    .smcol12 { width: calc(100% - 2%) }

    .smcol1,
    .smcol2,
    .smcol3,
    .smcol4,
    .smcol5,
    .smcol6,
    .smcol7,
    .smcol8,
    .smcol9,
    .smcol10,
    .smcol11,
    .smcol12 {
        background: yellowgreen;
        min-height: 50px;
        display: block;
        margin: 10px 1%;
        outline: 1px solid black;
        float: left;
    }
}

@media (min-width: 800px) {
    .lgcol1 { width: calc(8.33% - 2%) }
    .lgcol2 { width: calc(16.66% - 2%) }
    .lgcol3 { width: calc(24.99% - 2%) }
    .lgcol4 { width: calc(33.32% - 2%) }
    .lgcol5 { width: calc(41.65% - 2%) }
    .lgcol6 { width: calc(49.98% - 2%) }
    .lgcol7 { width: calc(58.31% - 2%) }
    .lgcol8 { width: calc(66.64% - 2%) }
    .lgcol9 { width: calc(74.97% - 2%) }
    .lgcol10 { width: calc(83.33% - 2%) }
    .lgcol11 { width: calc(91.63% - 2%) }
    .lgcol12 { width: calc(100% - 2%) }

    .lgcol1,
    .lgcol2,
    .lgcol3,
    .lgcol4,
    .lgcol5,
    .lgcol6,
    .lgcol7,
    .lgcol8,
    .lgcol9,
    .lgcol10,
    .lgcol11,
    .lgcol12 {
        background: lightsalmon;
        min-height: 50px;
        display: block;
        margin: 10px 1%;
        outline: 1px solid black;
        float: left;
    }
}