Wrong position for col-md-4 in flexible layout with bootstrap

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?

Code extract

<div class="row">

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

    <!-- pic -->
    <div class="col-xs-4 col-md-3">
      ...
    </div>

    <!-- payment -->
    <div class="col-xs-8 col-md-9">
      <div class="name">Anonymous</div>
      <div class="contributed">contributed</div>
    </div>

  </div>
  <!-- end contribution -->
</div>

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

To build on Head In Cloud's answer, you will want to use the clearfix class after every 2nd div (visible-xs visible-sm) for xs and small screens, and then a clearfix class after every 3rd div (hidden-xs hidden-sm) for medium and larger screens. To reproduce your example from above:

<div class="row">
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix hidden-xs hidden-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix visible-xs visible-sm"></div>
    <div class="col-xs-6 col-md-4" style="border:1px solid red;">
         <!-- inner content -->
    </div>
    <div class="clearfix"></div> <!-- this one is needed for all screen sizes, so just use the clearfix class -->
</div>

Another option, if it would work for the type of content you're using, is to set a min-height on those elements. It would be an estimate, but if you set the min-height to a value slightly larger than your largest element, then all of those divs would be the same height, so they would stack correctly and you wouldn't have to worry about the clearfix. This isn't ideal, because if you ever change the content, you'd have to make sure it still falls within that min-height value.