less - Bootstrap 3 mixin multiple make-*-column -

i'm using specific mixin trying make code more clear. instead of using:

<div class="col-lg-3 col-md-5 col-sm-6 col-xs-12"> 

i'm using:

<div class="stackoverflowrocksit"> 

and in mixins.less:

.stackoverflowrocksit{     .make-lg-column(3);     .make-md-column(4);     .make-sm-column(6);     .make-xs-column(12); } 

it works xs , sm viewports, not when resize md or lg (then taking sm size). proper way create columns different viewports sizes? idea?

you should re-order mixin calls:

.stackoverflowrocksit {     .make-xs-column(12);     .make-sm-column(6);     .make-md-column(4);     .make-lg-column(3); } 

@seven-phases-max right. bootstrap's code mobile first, mean should start code smallest screen widths , features , properties when screen size become wider.

bootstrap use css media queries make css code responsive. in situation .make-lg-column(3); compiles css code shown below:

@media (min-width: 1200px) {   .stackoverflowrocksit {     float: left;     width: 25%;   } } 

if write .make-md-column(4); after .make-lg-column(3); @media (min-width: 992px) came @media (min-width: 1200px) , evaluates true screens wider 1200px , overwrites large columns code.