Wrong position for col-md-4 in flexible layout with bootstrap
<p>Having some difficulties in resolving this issue (see screenshot). Basically, the fact that the first cell in the second line has a bigger height the 7th cell does not place properly ... Any workarounds? Is there something I am doing wrong?</p>

<p>Code extract</p>

<pre><code>&lt;div class="row"&gt;

  &lt;!-- contribution --&gt;
  &lt;div class="col-xs-6 col-md-4" style="border:1px solid red;"&gt;

    &lt;!-- pic --&gt;
    &lt;div class="col-xs-4 col-md-3"&gt;
      ...
    &lt;/div&gt;

    &lt;!-- payment --&gt;
    &lt;div class="col-xs-8 col-md-9"&gt;
      &lt;div class="name"&gt;Anonymous&lt;/div&gt;
      &lt;div class="contributed"&gt;contributed&lt;/div&gt;
    &lt;/div&gt;

  &lt;/div&gt;
  &lt;!-- end contribution --&gt;
&lt;/div&gt;
</code></pre>

<p>It goes the same for all contributions. I can't use a <code>row</code> div for each line as on small screens rows will have only 2 contributions instead of 3. Using only <code>col-xs-6 col-md-4</code> without <code>rows</code> allows me to have a flexible layout.</p>

<p><a href="https://i.stack.imgur.com/BFY0e.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BFY0e.png" alt="enter image description here"></a></p>