updated max-width: 767px to avoid breaking the existing behavior on col-sm

bootstrap_ms.css

.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;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }

@media (min-width: 480px) and (max-width: 767px) {
  .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.33333%; }

  .col-ms-2 {
    width: 16.66667%; }

  .col-ms-3 {
    width: 25%; }

  .col-ms-4 {
    width: 33.33333%; }

  .col-ms-5 {
    width: 41.66667%; }

  .col-ms-6 {
    width: 50%; }

  .col-ms-7 {
    width: 58.33333%; }

  .col-ms-8 {
    width: 66.66667%; }

  .col-ms-9 {
    width: 75%; }

  .col-ms-10 {
    width: 83.33333%; }

  .col-ms-11 {
    width: 91.66667%; }

  .col-ms-12 {
    width: 100%; }

  .col-ms-push-1 {
    left: 8.33333%; }

  .col-ms-push-2 {
    left: 16.66667%; }

  .col-ms-push-3 {
    left: 25%; }

  .col-ms-push-4 {
    left: 33.33333%; }

  .col-ms-push-5 {
    left: 41.66667%; }

  .col-ms-push-6 {
    left: 50%; }

  .col-ms-push-7 {
    left: 58.33333%; }

  .col-ms-push-8 {
    left: 66.66667%; }

  .col-ms-push-9 {
    left: 75%; }

  .col-ms-push-10 {
    left: 83.33333%; }

  .col-ms-push-11 {
    left: 91.66667%; }

  .col-ms-pull-1 {
    right: 8.33333%; }

  .col-ms-pull-2 {
    right: 16.66667%; }

  .col-ms-pull-3 {
    right: 25%; }

  .col-ms-pull-4 {
    right: 33.33333%; }

  .col-ms-pull-5 {
    right: 41.66667%; }

  .col-ms-pull-6 {
    right: 50%; }

  .col-ms-pull-7 {
    right: 58.33333%; }

  .col-ms-pull-8 {
    right: 66.66667%; }

  .col-ms-pull-9 {
    right: 75%; }

  .col-ms-pull-10 {
    right: 83.33333%; }

  .col-ms-pull-11 {
    right: 91.66667%; }

  .col-ms-offset-1 {
    margin-left: 8.33333%; }

  .col-ms-offset-2 {
    margin-left: 16.66667%; }

  .col-ms-offset-3 {
    margin-left: 25%; }

  .col-ms-offset-4 {
    margin-left: 33.33333%; }

  .col-ms-offset-5 {
    margin-left: 41.66667%; }

  .col-ms-offset-6 {
    margin-left: 50%; }

  .col-ms-offset-7 {
    margin-left: 58.33333%; }

  .col-ms-offset-8 {
    margin-left: 66.66667%; }

  .col-ms-offset-9 {
    margin-left: 75%; }

  .col-ms-offset-10 {
    margin-left: 83.33333%; }

  .col-ms-offset-11 {
    margin-left: 91.66667%; }
}

@media (min-width: 480px) and (max-width: 767px) {
  .container {
    max-width: 748px; }
    
  .form-horizontal .form-group .control-label {text-align:right;}
}

Very nice, thanks very much

Thank you, this is great! Do you plan on adding hidden-ms and visible-ms? It woould be extremely useful.

Thanks for posting this! I spent hours searching for the best solution and this is definitely the quickest and easiest. Also I think the only one that works if you're using the compiled Bootstrap version from a cdn. So just wanted to say thanks, and confirm it is working great.

Thank you, I was looking for this!

I was on a verge of replacing Bootstrap with something else if I didnt find this. thank you!

Adding new brekapoint to Bootstrap definitely is NOT trivial, and the lack of 480px breakpoint is quite strange?

Very nice! Thanks.

Life saver. Thanks!

Love this btw, but had to fork and add the following so you can reset offset like you can with the others:

.col-ms-offset-0 {
    margin-left: 0; 
}

Awesome, thanks for this!

Works brilliantly! Thank you!

I'm feeling a lot of love right now...
Thanks!!!!

Excellent fork for excellent solution!
Please hint me how to add responsive utilities: hidden-ms and visible-ms,
I could probably add them myself, just need a little hint xD

@Weaknessy @eSerenity

.visable-ms{
display:block;
}

.hidden-ms{
display:none;
}

Perfect.
Thank you very much.

It is a usefull correction to orginal @andyl solution, thanks.
However one problem stiil remains: bootstrap scaling up functionality as mentionned in https://getbootstrap.com/examples/grid/

Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.
This is lost when adding bootstrap_ms.css.

will not propagate for col-sm-6; we have to specify it explicitely with:

Could it be fixed ? Regards

Typographical correction, sorry:
<div class="col-xs-12 col-ms-6"> will not propagate for col-sm-6;
we have to specify it explicitely with: <div class="col-xs-12 col-ms-6 col-sm-6">

@MathiasZaja - ms is bigger than sm here. Therefore, the correct propagation would be for <div class="col-xs-12 col-ms-6"> to propagate col-sm-12, not col-sm-6.

Thanks!