Basic Multires Grid System

grid.css

/**
Basic MultiRes Grid System:

<div class="container"><!-- or .container-fluid-->
  <div class="row">
    <div class="col-xs-12  col-sm-6>Content Left</div>
    <div class="hide-on-xs col-sm-6">Content Right</div>
  </div>
</div>
**/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;   
}

.container {
    width: 100%;
    max-width: 992px;
    margin: 0 auto;
}

.container-fluid {
    width: 100%;
}

.container-fluid > .row {
    max-width: 992px;
    margin: 0 auto;
}
/** Hack de clearfix **/
.row::after, .row::before {
    content:"";
    display:table;
    clear: both;
}

[class *='col-'] {
    float: left;
    min-height: 1em;
    padding: 1em;
}

.col-1 { width:8.333333333333334%; }
.col-2 { width:16.666666666666668%; }
.col-3 { width:25%; }
.col-4 { width:33.333333333333336%; }
.col-5 { width:41.66666666666667%; }
.col-6 { width:50%; }
.col-7 { width:58.333333333333336%; }
.col-8 { width:66.66666666666667%; }
.col-9 { width:75%; }
.col-10{ width:83.33333333333334%; }
.col-11{ width:91.66666666666667%; }
.col-12{ width:100%; }

@media (max-width:576px) {
    .hide-on-xs { display: none; }
    .hide-on-xs-down {display:none};
    .col-xs-1{ width:8.333333333333334%; }
    .col-xs-2 { width:16.666666666666668%; }
    .col-xs-3 { width:25%; }
    .col-xs-4 { width:33.333333333333336%; }
    .col-xs-5 { width:41.66666666666667%; }
    .col-xs-6 { width:50%; }
    .col-xs-7 { width:58.333333333333336%; }
    .col-xs-8 { width:66.66666666666667%; }
    .col-xs-9 { width:75%; }
    .col-xs-10{ width:83.33333333333334%; }
    .col-xs-11{ width:91.66666666666667%; }
    .col-xs-12{ width:100%; }
}

@media (min-width:576px) and (max-width:767.98px) {
    .hide-on-sm { display: none; }
    .col-sm-1 { width:8.333333333333334%; }
    .col-sm-2 { width:16.666666666666668%; }
    .col-sm-3 { width:25%; }
    .col-sm-4 { width:33.333333333333336%; }
    .col-sm-5 { width:41.66666666666667%; }
    .col-sm-6 { width:50%; }
    .col-sm-7 { width:58.333333333333336%; }
    .col-sm-8 { width:66.66666666666667%; }
    .col-sm-9 { width:75%; }
    .col-sm-10{ width:83.33333333333334%; }
    .col-sm-11{ width:91.66666666666667%; }
    .col-sm-12{ width:100%; }
}

@media (min-width:768px) and (max-width:991.98px) {
    .hide-on-md { display: none; }
    .col-md-1 { width:8.333333333333334%; }
    .col-md-2 { width:16.666666666666668%; }
    .col-md-3 { width:25%; }
    .col-md-4 { width:33.333333333333336%; }
    .col-md-5 { width:41.66666666666667%; }
    .col-md-6 { width:50%; }
    .col-md-7 { width:58.333333333333336%; }
    .col-md-8 { width:66.66666666666667%; }
    .col-md-9 { width:75%; }
    .col-md-10{ width:83.33333333333334%; }
    .col-md-11{ width:91.66666666666667%; }
    .col-md-12{ width:100%; }
}

@media (min-width:992px) and (max-width:1199.98px) {
    .hide-on-lg { display: none; }
    .col-lg-1 { width:8.333333333333334%; }
    .col-lg-2 { width:16.666666666666668%; }
    .col-lg-3 { width:25%; }
    .col-lg-4 { width:33.333333333333336%; }
    .col-lg-5 { width:41.66666666666667%; }
    .col-lg-6 { width:50%; }
    .col-lg-7 { width:58.333333333333336%; }
    .col-lg-8 { width:66.66666666666667%; }
    .col-lg-9 { width:75%; }
    .col-lg-10{ width:83.33333333333334%; }
    .col-lg-11{ width:91.66666666666667%; }
    .col-lg-12{ width:100%; }
}

@media (min-width:1200px){
    .hide-on-xl { display: none; }
    .hide-on-xl-up {display:none};
    .col-xl-1 { width:8.333333333333334%; }
    .col-xl-2 { width:16.666666666666668%; }
    .col-xl-3 { width:25%; }
    .col-xl-4 { width:33.333333333333336%; }
    .col-xl-5 { width:41.66666666666667%; }
    .col-xl-6 { width:50%; }
    .col-xl-7 { width:58.333333333333336%; }
    .col-xl-8 { width:66.66666666666667%; }
    .col-xl-9 { width:75%; }
    .col-xl-10{ width:83.33333333333334%; }
    .col-xl-11{ width:91.66666666666667%; }
    .col-xl-12{ width:100%; }
}

@media (min-width: 576px) {
    .hide-on-sm-up {display:none};
}

@media (min-width: 768px) {
    .hide-on-md-up {display:none};
}

@media (min-width: 992px) {
    .hide-on-lg-up {display:none};
}

@media (max-width: 767.98px) { 
    .hide-on-sm-down {display:none};
}

@media (max-width: 991.98px) { 
    .hide-on-md-down {display:none};
}

@media (max-width: 1199.98px) {
    .hide-on-lg-down {display:none};
}

.hide {display:none};

/** End of Grid System **/