bootstrap_ms.css.scss

//
// Improved and much cleaner version of https://gist.github.com/andyl/6360906
//
//
// Bootstrap Mid-Small - col-ms-* - the missing grid set for Bootstrap3.
//
// This is a hack to fill the gap between 480 and 760 pixels - a missing range
// in the bootstrap responsive grid structure.  Use these classes to style pages
// on cellphones when they transition from portrait to landscape.
//
// NOTE: Here I use SASS instead of LESS for styling.  To convert to LESS
// replace '$screen' with '@screen' and '$grid' with '@grid'.
//
// See https://github.com/twbs/bootstrap/issues/10203 for more info.
//
// Columns, offsets, pushes, and pulls for the ms device range, from phones
// to tablets.
//
// Note that `.col-ms-12` doesn't get floated on purpose—there's no need since
// it's full-width.

@import 'bootstrap';

// ----- common styles - from twbs/bootstrap/blob/master/less/grid.less -----

$max-col-count: 12;

// Define grid base styles
%grid-base-style {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  ($grid-gutter-width / 2);
  padding-right: ($grid-gutter-width / 2);
}

//Loop and apply for all column classes
@for $i from 1 through $max-col-count {
  .col-ms-#{$i} {
    @extend %grid-base-style;
  }
}

// ----- col-ms breakpoints and related classes -----

@media (min-width: $screen-xs) {
  .container {
    @media (max-width: $screen-sm ) {
      max-width: $screen-sm - 20px;
    }
  }

  // Loop the columns
  @for $i from 1 through $max-col-count
  {
    .col-ms-#{$i}
    {
      float: left;
      width: percentage(($i / $grid-columns));
    }
  }

  // Push and pull columns for source order changes
  @for $i from 1 through ($max-col-count - 1)
  {
    .col-ms-push-#{$i}
    {
      left: percentage(($i / $grid-columns));
    }
  }
  @for $i from 1 through ($max-col-count - 1)
  {
    .col-ms-pull-#{$i}
    {
      right: percentage(($i / $grid-columns));
    }
  }

  // Offsets
  @for $i from 1 through ($max-col-count - 1)
  {
    .col-ms-offset-#{$i}
    {
      margin-left: percentage(($i / $grid-columns));
    }
  }
}