Floating Divs in Bootstrap Grid System - html

Question

I'm using the twitter bootstrap grid system for a responsive website. Most of my markup works just fine, but I've one nasty problem, which makes me mad. I've prepared a JSFiddle to let you see what happens: http://jsfiddle.net/gqb5hbza/
Here is my markup
<section>
<div class="content">
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="item">
<a href="#">
<img class="adaptive-img" src="http://placehold.it/400x330" />
</a>
<div class="item-content">
<h4 class="h4 black">Title Title Title Title Title Title Title Title Title Title Title Title </h4>
</div>
</div>
</div>
..........
</div>
</div>
</section>
I've multiple div boxes which contains an image and a headline. These boxes are rearranged when changing the browser window. But if one of these boxes has a different height (i.e. too long headline which needs two lines), the system breaks and doesn't rearrange correctly - as you can see in the fiddle. The fourth box should be under the first box and not beneath.
Hope that somebody can help me with this problem.

Answer 1

As mentioned, if you want to keep your layout as-is (e.g. not explicitly defining each row), the best solution is to keep each col div the same height. You could use Bootstrap's thumbnail/caption classes to make things look a little more tidy, and then adjust the min-height values for the caption using media queries to keep the extra white space to a minimum.
<section>
<div class="content">
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="thumbnail">
<a href="#">
<img class="adaptive-img" src="http://placehold.it/400x330" />
</a>
<div class="caption">
<h4 class="h4 black">Title Title Title Title Title Title Title Title Title Title Title Title </h4>
</div>
</div>
</div>
...
</div>
</div>
</section>
Then add something similar to this css:
.caption { min-height: 275px;}
#media(min-width: 400px) {
.caption { min-height: 100px;}
}
Here's an updated fiddle with this code. Hope this helps you out.