bootstrap_ms.css.scss

// Bootstrap Mid-Small - col-ms-* - the missing grid set for Bootstrap3.
//
// LICENSE under MIT - https://github.com/twbs/bootstrap/blob/master/LICENSE
//
// Source: https://gist.github.com/seyDoggy/4f370a676f5db6df2d1d
// Forked: https://gist.github.com/andyl/6360906
//
// 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.
//
// By default, the smallest column (col-xs-*) spans from 480px to 768px,
// neglecting the ever-useful 640px screen size. This snippet aims to solve
// that by limiting col-xs-* to the 480px to 640px range and adding col-ms-*
// that covers the range between 640px and 768px.
//
// This initiative was originally started by @andyl in response to this thread
// https://github.com/twbs/bootstrap/issues/10203, but I found it lacked the
// responsive utilities, container widths and other such conveniences that it
// generally raised more questions in me than it solved. Plus it didn't actually
// work well in my test cases. I'm hoping what I've done here fixes that.
//
// 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, pulls, visible-ms-*, hidden-ms and container-ms 
// for the ms device range, from landscape phones (640px) to tablets (768px).
//
// Note that `.col-ms-12` doesn't get floated on purpose—there's no need since
// it's full-width.

// $screen-ms variables (defined above import for $screen-xs-max override)
$screen-ms: 640px;
$screen-ms-min: $screen-ms;

// overrides default (has to be before import)
$screen-xs-max: ($screen-ms-min - 1);

// Include bootstrap
@import "bootstrap.scss";

// $screen-ms-max (defined after import to read $screen-sm)
$screen-ms-max: ($screen-sm-min - 1);

// $container-ms (defined after import to read $grid-gutter-width)
$container-ms: (592px + $grid-gutter-width);

// ms visible helper
@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
  @include responsive-visibility('.visible-ms');
}
.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;
  }
}

// ms hidden helper
@media (min-width: $screen-ms-min) and (max-width: $screen-ms-max) {
  @include responsive-invisibility('.hidden-ms');
}

// Container widths
//
// Set the container width (again), and override it for fixed navbars in media queries.

.container {
  @include container-fixed;

  @media (min-width: $screen-sm-min) {
    width: $container-sm;
  }
  @media (min-width: $screen-ms-min ) {
      width: $container-ms;
  }
  @media (min-width: $screen-md-min) {
    width: $container-md;
  }
  @media (min-width: $screen-lg-min) {
    width: $container-lg;
  }
}

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

.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;
  // 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);
}

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

@media (min-width: $screen-ms-min) {

  .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: percentage((1 / $grid-columns)); }
  .col-ms-2  { width: percentage((2 / $grid-columns)); }
  .col-ms-3  { width: percentage((3 / $grid-columns)); }
  .col-ms-4  { width: percentage((4 / $grid-columns)); }
  .col-ms-5  { width: percentage((5 / $grid-columns)); }
  .col-ms-6  { width: percentage((6 / $grid-columns)); }
  .col-ms-7  { width: percentage((7 / $grid-columns)); }
  .col-ms-8  { width: percentage((8 / $grid-columns)); }
  .col-ms-9  { width: percentage((9 / $grid-columns)); }
  .col-ms-10 { width: percentage((10/ $grid-columns)); }
  .col-ms-11 { width: percentage((11/ $grid-columns)); }
  .col-ms-12 { width: 100%; }

  // Push and pull columns for source order changes
  .col-ms-push-1  { left: percentage((1 / $grid-columns)); }
  .col-ms-push-2  { left: percentage((2 / $grid-columns)); }
  .col-ms-push-3  { left: percentage((3 / $grid-columns)); }
  .col-ms-push-4  { left: percentage((4 / $grid-columns)); }
  .col-ms-push-5  { left: percentage((5 / $grid-columns)); }
  .col-ms-push-6  { left: percentage((6 / $grid-columns)); }
  .col-ms-push-7  { left: percentage((7 / $grid-columns)); }
  .col-ms-push-8  { left: percentage((8 / $grid-columns)); }
  .col-ms-push-9  { left: percentage((9 / $grid-columns)); }
  .col-ms-push-10 { left: percentage((10/ $grid-columns)); }
  .col-ms-push-11 { left: percentage((11/ $grid-columns)); }

  .col-ms-pull-1  { right: percentage((1 / $grid-columns)); }
  .col-ms-pull-2  { right: percentage((2 / $grid-columns)); }
  .col-ms-pull-3  { right: percentage((3 / $grid-columns)); }
  .col-ms-pull-4  { right: percentage((4 / $grid-columns)); }
  .col-ms-pull-5  { right: percentage((5 / $grid-columns)); }
  .col-ms-pull-6  { right: percentage((6 / $grid-columns)); }
  .col-ms-pull-7  { right: percentage((7 / $grid-columns)); }
  .col-ms-pull-8  { right: percentage((8 / $grid-columns)); }
  .col-ms-pull-9  { right: percentage((9 / $grid-columns)); }
  .col-ms-pull-10 { right: percentage((10/ $grid-columns)); }
  .col-ms-pull-11 { right: percentage((11/ $grid-columns)); }

  // Offsets
  .col-ms-offset-1  { margin-left: percentage((1 / $grid-columns)); }
  .col-ms-offset-2  { margin-left: percentage((2 / $grid-columns)); }
  .col-ms-offset-3  { margin-left: percentage((3 / $grid-columns)); }
  .col-ms-offset-4  { margin-left: percentage((4 / $grid-columns)); }
  .col-ms-offset-5  { margin-left: percentage((5 / $grid-columns)); }
  .col-ms-offset-6  { margin-left: percentage((6 / $grid-columns)); }
  .col-ms-offset-7  { margin-left: percentage((7 / $grid-columns)); }
  .col-ms-offset-8  { margin-left: percentage((8 / $grid-columns)); }
  .col-ms-offset-9  { margin-left: percentage((9 / $grid-columns)); }
  .col-ms-offset-10 { margin-left: percentage((10/ $grid-columns)); }
  .col-ms-offset-11 { margin-left: percentage((11/ $grid-columns)); }
}

Very nice! Thank you!

Thanks for this plugin! I have two things to add:

1. Order of the media queries in lines 82 and 85 I believe should be reversed. First for -ms- then for -sm-.
2. When converting to LESS you also need to change the lines using @include

This is my updated LESS version: https://gist.github.com/matjaz-elumina/fb4eb093764db68dbed9

More issues:

1. This line $screen-xs-max: ($screen-ms-min - 1); at the beginning doesn't overwrite the BS default value as the default value is then again defined in variables.less (at least not in LESS!). It needs to be set in the actual variables.less file which I don't like. Any better ideas?
2. For visible helper to work you need to add this part:
   (put it at the beginning of the //ms visible helper)
   .visible-ms {
   display: none !important;
   }
   .visible-ms-block,
   .visible-ms-inline,
   .visible-ms-inline-block {
   display: none !important;
   }

Awesome, thanks!

It would be great if you could add some lines for beginners on how to best use the code. I know there are ways to compile Bootstrap yourself locally but maybe someone knows how to compile it online on http://getbootstrap.com maybe?

I see this is a scss file...how do I convert this to CSS so I can add it to my website?

@deankeen: If you don't use Sass locally you can put any Sass/scss code into this web tool to convert it: http://sassmeister.com/.

thank you so much! after using the other forks of this file, I could not get it to work consistently! Either only MS would work, or everything but MS would work. You are a legend!

@abea , this file doesn't compile in sassmeister