Bootstrap column align to previous item in column - css

Question

I've tried to resolve this problem for a while so I need your help Stackoverflow..
I have a template with 2 columns (with bootstrap grid system) like that :
http://snag.gy/Vh9Do.jpg
And I would like something like that :
http://snag.gy/cYIlo.jpg
My html looks like that for the moment :
<div class="container-fluid">
<div class="row">
<div class="post-container column-md-6" id="post-1">
content...
</div>
<div class="post-container column-md-6" id="post-2">
content...
</div>
</div>
<div class="row">
<div class="post-container column-md-6" id="post-3">
content...
</div>
<div class="post-container column-md-6" id="post-14">
content...
</div>
</div>
[...]
</div>
Do you have any idea how could I do that ? (without breaking the post order in the page, because their is only one column in portrait orientation)

Answer 1

You wont be able to do that only with html, you need add some JS and for that there is many good plugins (one example: http://www.akshitsethi.me/pinterest-like-grid-layout-using-jquery/)
Another option (if you don`t need IE support - 10% of the users):
CSS3 Collumn. Easy and clean:
Check out this fiddle > http://jsfiddle.net/luckmattos/aExxp/1/ or www.w3schools.com "css3_multiple_columns" or...
HTML
<div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
<div class="item2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
CSS
div {
width:500px;
padding:10px;
background:#ccc;
/* Number of COLS */
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
/* Distance between COLS */
-moz-column-gap:10px; /* Firefox */
-webkit-column-gap:10px; /* Safari and Chrome */
column-gap:10px;
}
.item1 {
background:#f00;
height:100px;
padding: 3px;
margin:10px;
display:inline-block;
}
.item2 {
background:#0f0;
height:150px;
padding: 3px;
margin:10px;
display:inline-block;
}
.item3 {
background:#00f;
height:100px;
padding: 3px;
margin:10px;
display:inline-block;
}

Answer 2

Without a jsfiddle to play around with, as a guess maybe try removing the .row elements, so something like this:
<div class="container-fluid">
<div class="post-container column-md-6" id="post-1">
content...
</div>
<div class="post-container column-md-6" id="post-2">
content...
</div>
<div class="post-container column-md-6" id="post-3">
content...
</div>
<div class="post-container column-md-6" id="post-14">
content...
</div>
[...]
</div>
If that doesn't work (my appologies) then I recommend using Masonry: http://masonry.desandro.com/options.html
Here are a bunch of examples that use Masonary: http://www.webappers.com/2011/12/29/15-great-examples-of-websites-using-jquery-masonry/