Adds a `col-ms-*` grid class to bootstrap 3

bootstrap-ms-grid-class.less

/* #NOTE: the 'ms' class depends on the '@screen-ms*' variables and adjusting the '@screen-*' variables to allow for this grid class */
/* mixins for the ms grid class based on 'https://github.com/twbs/bootstrap/blob/v3.3.7/less/mixins/grid.less' */

/* set the grid class variables */
@screen-ms: 480px;
@screen-ms-min: @screen-ms;
@screen-ms-max: (@screen-sm - 1);

/* set @screen-xs-max to work with @screen-ms-min */
@screen-xs-max: (@screen-ms-min - 1);

.make-ms-column(@columns; @gutter: @grid-gutter-width) {
    position: relative;
    min-height: 1px;
    padding-left: (@gutter / 2);
    padding-right: (@gutter / 2);

    @media (min-width: @screen-ms-min) {
        float: left;
        width: percentage((@columns / @grid-columns));
    }
}

.make-ms-column-offset(@columns) {
    @media (min-width: @screen-ms-min) {
        margin-left: percentage((@columns / @grid-columns));
    }
}

.make-ms-column-push(@columns) {
    @media (min-width: @screen-ms-min) {
        left: percentage((@columns / @grid-columns));
    }
}

.make-ms-column-pull(@columns) {
    @media (min-width: @screen-ms-min) {
        right: percentage((@columns / @grid-columns));
    }
}

/* override the internal bootstrap mixin to also include the 'ms' class */
.make-grid-columns() {
    /* Common styles for all sizes of grid columns, widths 1-12 */
    .col(@index) { /* initial */
        @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
        .col((@index + 1), @item);
    }

    .col(@index, @list) when (@index =< @grid-columns) { /* general; "=<" isn't a typo */
        @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
        .col((@index + 1), ~"@{list}, @{item}");
    }
}

/*
#NOTE: we have to remake the other grid classes in the right order to keep the css rules in the right order
use the grid framework to create the col classes
*/

.make-grid(xs);

@media (min-width: @screen-ms-min) {
    .make-grid(ms);
}

@media (min-width: @screen-sm-min) {
    .make-grid(sm);
}

@media (min-width: @screen-md-min) {
    .make-grid(md);
}

@media (min-width: @screen-lg-min) {
    .make-grid(lg);
}

/* add grid class to responsive utilities see: 'https://github.com/twbs/bootstrap/blob/v3.3.7/less/responsive-utilities.less' */
.visible-ms {
    .responsive-invisibility();
}

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

.visible-ms {
    @media (min-width: @screen-ms-min) and (max-width: @screen-ms-max) {
        .responsive-visibility();
    }
}

.visible-ms-block {
    @media (min-width: @screen-ms-min) and (max-width: @screen-ms-max) {
        display: block !important;
    }
}

.visible-ms-inline {
    @media (min-width: @screen-ms-min) and (max-width: @screen-ms-max) {
        display: inline !important;
    }
}

.visible-ms-inline-block {
    @media (min-width: @screen-ms-min) and (max-width: @screen-ms-max) {
        display: inline-block !important;
    }
}

.hidden-ms {
    @media (min-width: @screen-ms-min) and (max-width: @screen-ms-max) {
        .responsive-invisibility();
    }
}