title: Bootstrap column collapse
body: <p>I understand bootstrap 3 has a 12-column grid system.  My understanding is that anything over 12 columns is supposed to stack on the next row.  Why are my columns stacking 3 images on top, 2 images in middle and 1 on bottom?</p>
  
  <p>Here is my code and a link.  If you resize the browser width you can see:</p>
  
  <pre><code>&lt;div id="Portfolio" class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-4"&gt;
              &lt;a href="http://www.gizmoticket.jitsu.com"&gt;
                  &lt;img class="img-responsive" src="img/gizmo.png" alt="Gizmo Ticket"&gt;
              &lt;/a&gt;
              &lt;h4&gt;Gizmo Ticket System &amp;#8211; Ajax, EJS, node.js, MongoDB &amp;#8211; &lt;/h4&gt;
          &lt;/div&gt;      
  
          &lt;div class="col-md-4"&gt;
              &lt;a href="http://www.spataforeguitar.com"&gt;
                  &lt;img class="img-responsive" src="img/guitar.png" alt="Spatafore Guitar"&gt;    
              &lt;/a&gt;
              &lt;h4&gt;Spatafore Guitar Instruction &amp;#8211; HTML5, responsive, jQuery&lt;/h4&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-4"&gt;
              &lt;a href="http://lyfia.freeiz.com/index.php"&gt;
                  &lt;img class="img-responsive" src="img/lyfia.png" alt="Lyfia Massage"&gt;
              &lt;/a&gt;
              &lt;h4&gt;Lyfia Massage Therapy &amp;#8211; Bootstrap, responsive, jQuery&lt;/h4&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-4"&gt;
              &lt;a href="https://individualinvestor.myleggmason.com/portal/server.pt?open=514&amp;amp;objID=77504&amp;amp;mode=2&amp;amp;in_hi_userid=355661&amp;amp;cached=true"&gt;
                  &lt;img class="img-responsive" src="img/esg.png" alt="ESG"&gt;
              &lt;/a&gt;
              &lt;h4&gt;Legg Mason-ESG Feature &amp;#8211; jQuery, Amazing Slider&lt;/h4&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-4"&gt;
              &lt;a href="http://www.leggmason.co.uk/income/"&gt;
                  &lt;img class="img-responsive" src="img/income.png" alt="Income Campaign"&gt;
              &lt;/a&gt;
              &lt;h4&gt;Legg Mason-Income Feature &amp;#8211; jQuery, Amazing Slider&lt;/h4&gt;
          &lt;/div&gt;
  
          &lt;div class="col-md-4"&gt;
              &lt;a href="https://dl.dropboxusercontent.com/u/92838694/Final%20Project/mage.html"&gt;
                  &lt;img class="img-responsive" src="img/warcraft.png" alt="Warcraft"&gt;
              &lt;/a&gt;
              &lt;h4&gt;School Project &amp;#8211; HTML5 audio, Adaptive&lt;/h4&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>