.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,
.col-ms-11,
.col-ms-12 {position:relative; padding-left:15px; padding-right:15px;} 

.visible-ms-block {display:none;}
.visible-ms-inline {display:none;}
.visible-ms-inline-block {display:none;}

@media (min-width: 480px) and (max-width: 767px) {

    /* Needed for when an element hidden at xs needs to be visible at ms as main bootstrap css hides xs up to 767px*/
    /* This must be above .hidden-ms to work */
    .hidden-xs{display:block!important}

    .visible-ms-block {display:block;}
    .visible-ms-inline {display:inline;}
    .visible-ms-inline-block {display:inline-block;}

    .container {max-width:748px;}
    .hidden-ms {display:none !important;}
    .col-ms-1,
    .col-ms-2,
    .col-ms-3,
    .col-ms-4,
    .col-ms-5,
    .col-ms-6,
    .col-ms-7,
    .col-ms-8,
    .col-ms-9,
    .col-ms-10,
    .col-ms-11 {float:left;}
    .col-ms-1 {width:8.33333333%;}
    .col-ms-2 {width:16.66666667%;}
    .col-ms-3 {width:25%;}
    .col-ms-4 {width:33.33333333%;}
    .col-ms-5 {width:41.66666667%;}
    .col-ms-6 {width:50%;}
    .col-ms-7 {width:58.33333333%;}
    .col-ms-8 {width:66.66666667%;}
    .col-ms-9 {width:75%;}
    .col-ms-10 {width:83.33333333%;}
    .col-ms-11 {width:91.66666667%;}
    .col-ms-12 {width:100%;}
}