body{
    margin:0;
    padding: 0;
}
.wrap{
    border: 1px solid #999;
    width: 100%;
    box-sizing: border-box;
}
.wrap:before,
.wrap:after{
    display: table;
    content: '';
    clear: both;
}
[class*="col-"]{
    height: 50px;
    margin: 20px 0 0 20px;
    background-color: #eee;
    border: 1px solid #999;
    float: left;
}
@media (min-width: 769px) {
    .col-md-1{
        width: calc(8.333333% - 20px);
    }
    .col-md-2{
        width: calc( 16.666667% - 30px );
    }

    .col-md-3{
        width: calc( 25% - 30px );
    }


    .col-md-4{
        width: calc( 33.333333% - 30px );
    }

    .col-md-6{
        width: calc( 50% - 30px );
    }
}
@media (max-width: 769px) {
    .col-sm-2{
        width: calc( 16.666667% - 30px );
    }
    .col-sm-3{
        width: calc( 25% - 30px );
    }
    .col-sm-6{
        width: calc( 50% - 30px );
    }
    .col-sm-8{
        width:calc(65% - 20px) ;
    }
    .col-sm-12{
        width: calc(100% - 40px);
    }
}