My thumbnails in a row are not side by side (instead of stacking on top of each other)

Question

So, I want to do what, in my opinion, was pretty simple, to have a row of 6 thumbnails that will add up to two rows of 3 thumbnails on the XS displays. But for some reason, all my thumbnails add up in two columns. I'm sure I'm missing something obvious here.

<div class="row">
<div class="col-xs-12 col-md-6">
    <a href="#" class="thumbnail" style="width:30%">
      <img src="img/cottagefront.png" alt="...">
    </a>
    <a href="#" class="thumbnail" style="width:30%">
      <img src="img/cottagekitchen.png" alt="...">
    </a>
    <a href="#" class="thumbnail" style="width:30%">
      <img src="img/backbonestateparktrail.jpg" alt="...">
    </a>

  </div>

<div class="col-xs-12 col-md-6">
    <a href="#" class="thumbnail" style="width:30%">
      <img src="img/cottagebed.png" alt="...">
    </a>
    <a href="#" class="thumbnail" style="width:30%">
      <img src="img/backbonestatepark.jpg" alt="...">
    </a>
    <a href="#" class="thumbnail" style="width:30%">
      <img src="img/cottageliving.png" alt="...">
    </a>
</div>
</div>

It looks like this: http://i.imgur.com/nWYmDMB.png

Answer 1

Problem:

img . , xs, 100% , md, 50% .

, . display: block, . .

:

. .

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/200x200" alt="...">
    </a>
  </div>
  <div class="col-xs-4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/200x200" alt="...">
    </a>
  </div>
  <div class="col-xs-4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/200x200" alt="...">
    </a>
  </div>

</div>

<div class="row">
  <div class="col-xs-4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/200x200" alt="...">
    </a>
  </div>
  <div class="col-xs-4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/200x200" alt="...">
    </a>
  </div>
  <div class="col-xs-4">
    <a href="#" class="thumbnail">
      <img src="http://placehold.it/200x200" alt="...">
    </a>
  </div>
</div>

Hide result