title: My thumbnails in a row are not side by side (Instead stacking on top of each other)
body: <p>So I want to do what I thought was pretty basic, have a row of 6 thumbnails that would stack to two rows of 3 thumbnails on XS displays. But for some reason all of my thumbnails stack in two columns. I am sure I am missing something obvious here.</p>
  
  <pre><code>&lt;div class="row"&gt;
  &lt;div class="col-xs-12 col-md-6"&gt;
      &lt;a href="#" class="thumbnail" style="width:30%"&gt;
        &lt;img src="img/cottagefront.png" alt="..."&gt;
      &lt;/a&gt;
      &lt;a href="#" class="thumbnail" style="width:30%"&gt;
        &lt;img src="img/cottagekitchen.png" alt="..."&gt;
      &lt;/a&gt;
      &lt;a href="#" class="thumbnail" style="width:30%"&gt;
        &lt;img src="img/backbonestateparktrail.jpg" alt="..."&gt;
      &lt;/a&gt;
  
    &lt;/div&gt;
  
  &lt;div class="col-xs-12 col-md-6"&gt;
      &lt;a href="#" class="thumbnail" style="width:30%"&gt;
        &lt;img src="img/cottagebed.png" alt="..."&gt;
      &lt;/a&gt;
      &lt;a href="#" class="thumbnail" style="width:30%"&gt;
        &lt;img src="img/backbonestatepark.jpg" alt="..."&gt;
      &lt;/a&gt;
      &lt;a href="#" class="thumbnail" style="width:30%"&gt;
        &lt;img src="img/cottageliving.png" alt="..."&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This looks like this: <a href="http://i.imgur.com/nWYmDMB.png" rel="nofollow">http://i.imgur.com/nWYmDMB.png</a></p>