title: Bootstrap: show/hide column divs with checkbox and change column span
body: <p>I'm using Bootstrap 3.2. I'm trying to figure out if there's a way to show/hide a "col-sz-#" div AND change the "col-sz-#" class in visible divs to resize them to fit the container using checkbox style buttons for each column.</p>
  
  <p>For example, if I start with </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-2"&gt;...&lt;/div&gt;
      &lt;div class="col-md-2"&gt;...&lt;/div&gt;
      &lt;div class="col-md-2"&gt;...&lt;/div&gt;
      &lt;div class="col-md-2"&gt;...&lt;/div&gt;
      &lt;div class="col-md-2"&gt;...&lt;/div&gt;
      &lt;div class="col-md-2"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then if hide 2 of them and the others resize:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-2 hidden"&gt;...&lt;/div&gt;
      &lt;div class="col-md-2 hidden"&gt;...&lt;/div&gt;
      &lt;div class="col-md-3"&gt;...&lt;/div&gt;
      &lt;div class="col-md-3"&gt;...&lt;/div&gt;
      &lt;div class="col-md-3"&gt;...&lt;/div&gt;
      &lt;div class="col-md-3"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>if the total columns can't divide 12 evenly like 5, then it wouldn't change.</p>