title: Bootstrap 3 mixin multiple make-*-column
body: <p>I'm using an specific mixin trying to make my code more clear. So instead of using:</p>
  
  <pre><code>&lt;div class="col-lg-3 col-md-5 col-sm-6 col-xs-12"&gt;
  </code></pre>
  
  <p>I'm using:</p>
  
  <pre><code>&lt;div class="stackOverflowRocksIt"&gt;
  </code></pre>
  
  <p>and in my mixins.less:</p>
  
  <pre><code>.stackOverflowRocksIt{
      .make-lg-column(3);
      .make-md-column(4);
      .make-sm-column(6);
      .make-xs-column(12);
  }
  </code></pre>
  
  <p>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?</p>