title: Elements not laying out as expected
body: <p>im trying to build a simple website consuming the flickr api, getting the fotos and the details, and showing the content with bootstrap, but something strange is happening and i dont know how to fix it, my code at the moment is <strong>working like this:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/s67eg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s67eg.png" alt="enter image description here"></a></p>
  
  <p>in this image, the 4th fotos div should be wrapped in the next row, and not fill the space that is left from the 3th,</p>
  
  <p><strong>here is the effect that i want:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/CurgW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CurgW.png" alt="enter image description here"></a></p>
  
  <p><strong>code html:</strong></p>
  
  <pre><code>&lt;div class="row" id="results"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>the container is there to, but i have more things above so its useless to put it here, the important div is there.</p>
  
  <p><strong>code javascript relevant part</strong></p>
  
  <pre><code>var htmlText = "&lt;div class='col-md-4 style='margin-top:200px'&gt;&lt;img src =" + src + " width=" + width + " height=" + height + "&gt;" +
  "&lt;p&gt;&lt;b&gt;título:  &lt;/b&gt;:" + title + "&lt;/p&gt;" + "&lt;p&gt;&lt;b&gt;autor:  &lt;/b&gt;" + owner + "&lt;/p&gt;" + "&lt;p&gt;&lt;b&gt;data:  &lt;/b&gt;" + date + "&lt;/p&gt;" + "&lt;p&gt;&lt;b&gt;local:  &lt;/b&gt;" + local
  
  for (var i = 0; i &lt; tags.length; i++) {
      htmlText += "&lt;label style='border:1px solid grey;margin-left:10px'&gt;" + $(tags[i]).attr('raw') + "&lt;/label&gt;";
  }
  
  htmlText += "&lt;/div&gt;";
  $('#results').append(htmlText);
  </code></pre>
  
  <p>Ps: Sorry for my bad paint skills, and bad english :)</p>