Bootstrap column align to previous item in column

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/