I've spent hours trying to solve this problem, but I can't seem to get it to work as intended.
I want the layout of my boxes to be like this using Bootstrap grids:
However, after implementing the jQuery Masonry plugin (which I used to manage varying div heights), it seems that it's only displaying in 2 columns.
HTML
<div class="container" >
<div id="grid" class="row">
<div class="span5 box box1">1</div>
<div class="span4 box box2">2</div>
<div class="span3 box box3">3</div>
<div class="span5 box box4">4</div>
<div class="span4 box box5">5</div>
<div class="span3 box box6">6</div>
</div>
</div>
CSS
.box { background: #ccc; margin-bottom: 20px; }
.box1 { height: 290px; }
.box2 { height: 200px; }
.box3 { height: 300px; }
.box4 { height: 250px; }
.box5 { height: 340px }
.box6 { height: 240px }
JS
jQuery(function(){
jQuery('#grid').masonry({
itemSelector: '.box',
});
});
Demo: http://jsbin.com/afihux/3/
I aimed for responsiveness by using Twitter Bootstrap, so I want to ensure it remains as responsive as possible.