title: How to make bootstrap columns collapse only in equal multiples?
body: <p>I have 4 equal columns in each bootstrap row. The only 3 configurations I want to allow is: </p>
  
  <ol>
  <li>All 4 next to each other</li>
  <li>Two above and two below</li>
  <li>All in a single column</li>
  </ol>
  
  <p>However, if I move the screen size, I sometimes get 3 columns at the top and one centered below. How can I prevent this and make the number of columns above and below equal?</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm"&gt;
        &lt;img src="" class="img"&gt;
        &lt;/div&gt;
      &lt;div class="col-sm"&gt;
        &lt;img src="" class="img"&gt;
      &lt;/div&gt;
      &lt;div class="col-sm"&gt;
        &lt;img src="" class="img"&gt;
       &lt;/div&gt;
      &lt;div class="col-sm"&gt;
        &lt;img src="" class="img"&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Basically, I want to prevent this</p>
  
  <pre><code>1 |  2  |  3
       4
  </code></pre>
  
  <p>and only allow these:</p>
  
  <pre><code>1  |  2  |  3  |  4
  
  1  |  2
  3  |  4
  
  1
  2
  3
  4
  </code></pre>
  
  <p>I appreciate any help!</p>