title: Number of columns per row in responsive grid
body: <p>Is there a way of working out how many columns are in each row? Based on the responsive viewport and without changing the html.</p>
  
  <pre><code>&lt;div class="row"&gt;
     &lt;div class="col-xs-12 col-sm-6 col-lg-8"&gt;.col-xs-12 .col-sm-6 .col-lg-8&lt;/div&gt;
     &lt;div class="col-xs-6 col-lg-4"&gt;.col-xs-6 .col-lg-4&lt;/div&gt;
     &lt;div class="col-xs-6 col-sm-4"&gt;.col-xs-6 .col-sm-4&lt;/div&gt;
     &lt;div class="col-xs-6 col-sm-10"&gt;.col-xs-6 .col-sm-10&lt;/div&gt;
     &lt;div class="col-xs-6 col-sm-4"&gt;.col-xs-6 .col-sm-4&lt;/div&gt;
     &lt;div class="col-xs-6 col-sm-4 col-lg-10"&gt;.col-xs-6 .col-sm-4 col-lg-10&lt;/div&gt;
     &lt;div class="col-xs-6 col-sm-4 col-md-2"&gt;.col-xs-6 .col-sm-4 col-md-2&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>E.g: number of columns per row</p>
  
  <pre><code>Default (XS) 
  1
  2
  2
  2
  
  Medium
  2
  1
  1
  3
  
  Large
  2
  1
  1
  1
  2
  </code></pre>
  
  <p>Example large viewport with 5 rows
  <a href="https://i.stack.imgur.com/zb0p2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zb0p2.png" alt="enter image description here"></a>
  <a href="https://codepen.io/anon/pen/JGwdmO" rel="nofollow noreferrer">https://codepen.io/anon/pen/JGwdmO</a></p>