3

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?

Mario Levrero
  • 3,345
  • 4
  • 26
  • 57
  • 3
    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 Jun 27 '14 at 09:48
  • That is! Thanks a lot! If you write it as an answer I will accept it. – Mario Levrero Jun 27 '14 at 09:55
  • 1
    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 Dec 20 '14 at 03:19

1 Answers1

13

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.

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224