Create grid using Bootstrap divs with variable height

Question

I have a grid of divs (using Bootstrap3) (see image below). I would like them act like a grid, but if they don't line up horizontally, they often are very much NOT lined up like a grid.

I thought this would be an easy solution, and I still think it might be, but for the life of me, I can't get it to work the way I'm hoping.

I've tried a lot of combinations of adding pull-left, and pull-right...etc, but again - nothing is working.

Quick example of what I mean - a grid of divs with dynamically varying heights:

<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>

Answer 1

I ended up just using a @media query. I added "col-right" class (is not a defined class - just made up) to the ones that should be on the right in large 2-column version, and on anything 1200px (lg) and over, have them float right.

This allowed the others (which default to float:left;) to wrap up next to them.

CSS:

@media (min-width: @screen-lg) {
    .col-right {
        float: right;
    }
}

HTML

<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12 col-right">
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12 col-right">
    Lorem ipsum<br>
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>
<div class="col-lg-6 col-md-12">
    Lorem ipsum<br>
    Lorem ipsum<br>
</div>