title: How can I change Bootstrap columns sizing based on screen size?
body: <p>I have 6 items to display...</p>
  <p>On a cell phone (xs) I want two rows of three items to display and on bigger than cell phone size, I'd like to see all six on the same row.</p>
  <p>I tried...</p>
  <pre><code>&lt;div class='row'&gt;
    &lt;div class='col-xs-4 col-sm-2'&gt;1&lt;/div&gt;
    &lt;div class='col-xs-4 col-sm-2'&gt;2&lt;/div&gt;
    &lt;div class='col-xs-4 col-sm-2'&gt;3&lt;/div&gt;
    &lt;div class='col-xs-4 col-sm-2'&gt;4&lt;/div&gt;
    &lt;div class='col-xs-4 col-sm-2'&gt;5&lt;/div&gt;
    &lt;div class='col-xs-4 col-sm-2'&gt;6&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>This displays fine on a large screen with all 6 items but when viewing in the xs screen (phone) it just shows 6 separate rows.</p>
  <p>I want to see</p>
  <p>1   2   3   4   5   6</p>
  <p>on large screen and</p>
  <p>1   2   3</p>
  <p>4   5   6</p>
  <p>on xs screens.</p>
  <p>Any ideas?  Thanks</p>