CSS: Responsive Grid with the different media breakpoints

grid.css

/*========================================================
    GRID SYSTEM - Simple and Basic 
=========================================================*/
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/*-------------------------------------------------------
    Clearfix
---------------------------------------------------------*/
.cf:after,
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

/*-------------------------------------------------------
    ROW
---------------------------------------------------------*/
.row:before,
.row:after { 
    content: ""; 
    display: table; 
}
.row:after { 
    clear:both;
}
.row { 
    margin-left: -15px;
    zoom:1; /* For IE 6/7 */ 
}
.row-no-padding-bottom [class*="column-"] {
    padding-bottom: 0;
}
/*-------------------------------------------------------
    COLUMNS
---------------------------------------------------------*/
[class*="column-"] {
    float: left;
    padding-left: 15px;
    padding-bottom: 15px;
}
@media (max-width: 499px) {
    [class*="column-"] {
        float: left;
        padding-left: 10px;
        padding-bottom: 10px;
    }  
}
/*-------------------------------------------------------
    XS
---------------------------------------------------------*/
.column-xs-1 {
    width:8.33333333333%;
}
.column-xs-2 {
    width:16.6666666667%;
}
.column-xs-3 {
    width:25.0%;
}
.column-xs-4 {
    width:33.3333333333%;
}
.column-xs-5 {
    width:41.6666666667%;
}
.column-xs-6 {
    width:50.0%;
}
.column-xs-7 {
    width:58.3333333333%;
}
.column-xs-8 {
    width:66.6666666667%;
}
.column-xs-9 {
    width:75.0%;
}
.column-xs-10 {
    width:83.3333333333%;
}
.column-xs-11 {
    width:91.6666666667%;
}
.column-xs-12 {
    width: 100%;
}

/*-------------------------------------------------------
    SM
---------------------------------------------------------*/
@media (min-width: 768px) {
    .column-sm-1 {
        width:8.33333333333%;
    }
    .column-sm-2 {
        width:16.6666666667%;
    }
    .column-sm-3 {
        width:25.0%;
    }
    .column-sm-4 {
        width:33.3333333333%;
    }
    .column-sm-5 {
        width:41.6666666667%;
    }
    .column-sm-6 {
        width:50.0%;
    }
    .column-sm-7 {
        width:58.3333333333%;
    }
    .column-sm-8 {
        width:66.6666666667%;
    }
    .column-sm-9 {
        width:75.0%;
    }
    .column-sm-10 {
        width:83.3333333333%;
    }
    .column-sm-11 {
        width:91.6666666667%;
    }
    .column-sm-12 {
        width: 100%;
    }
}
/*-------------------------------------------------------
    MD
---------------------------------------------------------*/
@media (min-width: 992px) {
    .column-md-1 {
        width:8.33333333333%;
    }
    .column-md-2 {
        width:16.6666666667%;
    }
    .column-md-3 {
        width:25.0%;
    }
    .column-md-4 {
        width:33.3333333333%;
    }
    .column-md-5 {
        width:41.6666666667%;
    }
    .column-md-6 {
        width:50.0%;
    }
    .column-md-7 {
        width:58.3333333333%;
    }
    .column-md-8 {
        width:66.6666666667%;
    }
    .column-md-9 {
        width:75.0%;
    }
    .column-md-10 {
        width:83.3333333333%;
    }
    .column-md-11 {
        width:91.6666666667%;
    }
    .column-md-12 {
        width: 100%;
    }
}
/*-------------------------------------------------------
    LG
---------------------------------------------------------*/
@media (min-width: 1200px) {
    .column-lg-1 {
        width:8.33333333333%;
    }
    .column-lg-2 {
        width:16.6666666667%;
    }
    .column-lg-3 {
        width:25.0%;
    }
    .column-lg-4 {
        width:33.3333333333%;
    }
    .column-lg-5 {
        width:41.6666666667%;
    }
    .column-lg-6 {
        width:50.0%;
    }
    .column-lg-7 {
        width:58.3333333333%;
    }
    .column-lg-8 {
        width:66.6666666667%;
    }
    .column-lg-9 {
        width:75.0%;
    }
    .column-lg-10 {
        width:83.3333333333%;
    }
    .column-lg-11 {
        width:91.6666666667%;
    }
    .column-lg-12 {
        width: 100%;
    }
}
/*-------------------------------------------------------
    Clearfix
---------------------------------------------------------*/
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*-------------------------------------------------------
    Alignments & Images
---------------------------------------------------------*/
.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.pull-right {
    float: right;
}
.pull-left {
    float: left;
}
.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}
.alpha {
  padding-left: 0 !important;
}
.omega {
  padding-bottom: 0 !important;
}
/*-------------------------------------------------------
    Container Width and Padding
---------------------------------------------------------*/
.container {
    max-width: 1260px;
    margin: 0 auto;
    padding: 0;
}
@media (max-width: 771px) {
    .container {
        margin: 0 auto;
        padding: 0;
    }    
}
/*-------------------------------------------------------
    Hidden Devices
---------------------------------------------------------*/
@media (max-width: 499px) {
    .hidden-phone {
        display: none;
    }
    .hidden-desktop {
        display: block;
    }
}
@media only screen and (min-width: 771px) {
    .hidden-desktop {
        display: none !important;
    }
}
@media (min-width: 771px) and (max-width: 992px) {
    .hidden-tablet-medium {
        display: none !important;
    }
    .show-tablet {
        display: block;
    }
}
@media (min-width: 500px) and (max-width: 771px) {
    .hidden-tablet-small {
        display: none !important;
    }
    .show-tablet {
        display: block;
    }
}
@media (max-width: 499px) {
    .hidden-phone {
        display: none;
    }
    .hidden-desktop {
        display: block;
    }
}