title: Change Number of Div Elements in Row Based on Screen Size with Bootstrap
body: <p>Is it possible to have different numbers of <code>&lt;div&gt;</code> elements depending on screen size with Bootstrap? </p>
  
  <p>For example, 4 columns per row on desktops.</p>
  
  <pre><code>+-----------+-----------+-----------+-----------+
  | .col-md-3 | .col-md-3 | .col-md-3 | .col-md-3 |
  +-----------+-----------+-----------+-----------+
  | .col-md-3 | .col-md-3 | .col-md-3 | .col-md-3 |
  +-----------+-----------+-----------+-----------+
  </code></pre>
  
  <p>Then instead of having each column span 100% on tablets and phones, have 3 columns per row on tablets. Pushing columns over 12 to the next row, like below.</p>
  
  <pre><code>+-----------+-----------+-----------+
  | .col-sm-4 | .col-sm-4 | .col-sm-4 |
  +-----------+-----------+-----------+
  | .col-sm-4 | .col-sm-4 | .col-sm-4 |
  +-----------+-----------+-----------+
  | .col-sm-4 | .col-sm-4 |
  +-----------+-----------+
  </code></pre>
  
  <p>I found Bootstrap's <a href="http://getbootstrap.com/css/#responsive-utilities" rel="nofollow noreferrer">responsive utilities</a>, where I can hide or show columns only for certain screen sizes. This would mean I have to repeat tons of the columns however (see snippet below), so I was hoping there would be a cleaner solution.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
    &lt;meta charset="utf-8"/&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;section class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-md-3 col-sm-4"&gt;
        &lt;p&gt;1&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 col-sm-4"&gt;
        &lt;p&gt;2&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 col-sm-4"&gt;
        &lt;p&gt;3&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 hidden-sm"&gt;
        &lt;p&gt;4&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="hidden-md visible-sm-4"&gt;
        &lt;p&gt;4&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 col-sm-4"&gt;
        &lt;p&gt;5&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 col-sm-4"&gt;
        &lt;p&gt;6&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 hidden-sm"&gt;
        &lt;p&gt;7&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-3 hidden-sm"&gt;
        &lt;p&gt;8&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
      &lt;div class="hidden-md visible-sm-4"&gt;
        &lt;p&gt;7&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="hidden-md visible-sm-4"&gt;
        &lt;p&gt;8&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As far as I am aware, you cannot leave out the containing <code>.row</code> div. It would be nice to be able to just put <code>class="col-md-3 col-sm-4 col-xs-6"</code> for all the elements and let bootstrap take however many <code>&lt;div&gt;</code>s to add up to 12. So 4 on medium screens, 3 on small screens, and 2 on extra small.</p>