bootstrap_ms.css.scss

// 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 -----

.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-xs) {
  .container {
    @media (max-width: $screen-sm ) {
      max-width: $screen-sm - 20px;
    }
  }

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

Solution to Jakobud

replace

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

to

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

Is this hack still working on Boostrap 3.2.0 ?

I think at line 18 the code should be :

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

I'm working with BS 3.2.0 No issue yet after making this change.

Thank you for this hack.
It's also quite easy to implement this mixin version for us semantics nerds (in LESS):

@screen-ms-min: 480px;

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

Really very helpful, thanks a ton!!

This seems pretty useful but it doesn't include any licencing information. How do I know if I can use it?

I've forked this gist and changed the following:

• added $screen-ms variables (min = 640, max = $screen-sm - 1)
• added $container-ms variable
• globally changed the $screen-xs-max to equal $screen-ms-min - 1 (so col-xs covers 480 to 639 as far as helpers are concerned)
• added .visible-ms-* helpers
• added .hidden-ms helper
• container size reads from $container-ms

Gist: https://gist.github.com/seyDoggy/4f370a676f5db6df2d1d

I am facing the same need for this breakpoint. The xs range is too wide up to 768px, remember that some desktops until few years were 640px. the range 480px to 768px is a good viewport for many uses not as a phone stacked range < 480px.

I'm facing the same problem as Jakobud!

the "col-ms-x" rule seems to overwrite everything "above" it. It's impossible to combine it with "col-sm-x" or "col-md-x", because they're getting completely ignored. Smaller sizes like "col-xs-x" seem to work.

Any workaround / fix so far?

Thanks for the gist and inspiration. I changed the naming to sx since for me ms always felt larger than sm. Here's my scss mixin https://gist.github.com/mediastuttgart/caa6e410c5aed8eebd92.

Great!! Thanks.

You can also add visibility adding this

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

Thanks a lot!

@Noctim: try hballesteros fix - it works for me.

FYI I've published similar code as https://github.com/adjohnson916/bootstrap-grid-ms.

Thanks! I'm using them in my current project.

I had the same issues as Jakobud. What i did was dumping the whole code into a .scss file, deleting the @import 'bootstrap' thing and replacing this

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

with this

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

Cheers mate. Thanks for the code.