Bootstrap Column grid, min-height

Question

I have a jsfiddel here - http://jsfiddle.net/ryz4wugo

I'm using bootstrap It's four columns with varying amounts of text.

When the window is resized and the layout moves to two columns, block three is pushed to the right and block four pushed down.

Bootstrap uses floats to position the columns and because the blocks are different heights the grid is pushed out of space.

I don't want to override bootstraps floats because that will cause other problems.

Is the best way to fix this with min-height, are there any problems with min-height in ie.

        <div class="container">

            <div class="row">


                <div class="col-sm-6 col-md-3 block">
                    <p>
                        <span>ONE</span>   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, Ut enim ad minim veniam, Ut enim ad minim veniam,
                    </p>    
                </div>

                <div class="col-sm-6 col-md-3 block">
                     <p>
                        <span>TWO</span>  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    </p>   
                </div>

                <div class="col-sm-6 col-md-3 block">
                     <p>
                        <span>THREE</span>  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
                    </p>   
                </div>

                <div class="col-sm-6 col-md-3 block">
                     <p>
                        <span>FOUR</span>  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    </p>   
                </div>

            </div>    

        </div>    

Answer 1

You could do it like this by using clear: left; to 3rd column.

JSFiddle - DEMO

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-3 block">
        ......
        </div>
        <div class="col-sm-6 col-md-3 block">
        ......
        </div>
        <div class="col-sm-6 col-md-3 block" style="clear: left;">
        ......
        </div>
        <div class="col-sm-6 col-md-3 block">
        ......
        </div>
    </div>
</div>

OR: Just add this line in your stylesheet.css

JSFiddle - DEMO

CSS:

.row div:nth-child(3) {
    clear: left;
}

---

As per Bootstrap CSS @media queries:

JSFiddle - DEMO or Full Screen View

CSS:

@media (min-width: 768px) {
    .row .col-sm-6:nth-child(3) {
        clear: left !important;
    }
}
@media (min-width: 992px) {
    .row .col-md-3:nth-child(3) {
        clear: none !important;
    }
}

---

[EDITED] - [Thanks to @Christina!]

Bootstrap has a way of addressing this. Since it's supposed to add to 12, you add a clearfix visible only on that breakpoint: <div class="clearfix visible-sm"></div> after the 12 at that breakpoint:

JSFiddle - DEMO

Clearfix visible with jQuery fallback for the equal heights responsive script.

JSFiddle - DEMO

---