Bootstrap 3 mixin multiple make-*-column

Question

I'm using an specific mixin trying to make my code more clear. So 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 my mixins.less:

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

It works properly with XS and SM viewports, but not when I resize to MD or LG (then is taking the SM size). Is this the proper way to create columns for different viewports sizes? Any idea?

If I understand it correctly you need to invoke those in reverse (i.e. xs to lg), otherwise sm styles override md and lg since they all are set with just a min-width query (w/o max-width). Btw., same is applicable for HTML classes order - i.e. the smaller should go first. — seven-phases-max
That is! Thanks a lot! If you write it as an answer I will accept it. — Mario Levrero
Just in case to correct my comment above. "HTML classes order" does not actually matter - only the order of them in CSS is what important only. — seven-phases-max

Bass Jobsen Bass Jobsen · Accepted Answer · 2014-11-02T14:27:36

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.

Bootstrap 3 mixin multiple make-*-column

1 Answers