Bootstrap 3 mixin multiple make-*-column

Question

I\'m using an specific mixin trying to make my code more clear. So instead of using:

Answer 1

You should re-order your mixin calls:

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

@seven-phases-max is right. Bootstrap's code is mobile first, which mean you should start your code for the smallest screen widths and features and properties when the screen size become wider.

Bootstrap use CSS media queries to make the CSS code responsive. In your situation the .make-lg-column(3); compiles into the CSS code that shown below:

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

If you write .make-md-column(4); after the .make-lg-column(3); the @media (min-width: 992px) will came @media (min-width: 1200px) and also evaluates true for screens wider than 1200px and so overwrites your large columns code.