Bootstrap 3 column issue

Question

I'm working with bootstrap 3, and am new to it but it seems like a fairly simple transition from 2.

Here is the jsfiddle with the code: http://jsfiddle.net/AHvLW/

And here is an image of how it renders when they are all in col-md-4:

I don't get it though, it works fine in jsFiddle, but not on my index file. Anyone experience a similar issue of might know whats up with it?

Answer 1

Since the columns are not all equal in height you need to add a clearfix <div> for the large viewports just as the new row should start, that is between your 3rd and 4th column:

<div class="row">
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>

    <!-- Add the extra clearfix for only the required viewport -->
    <div class="clearfix visible-md visible-lg"></div>

    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">...</div>
</div>

Demo fiddle