Bootstrap 3 responsive columns of varying heights

Question

EDIT The pricing tables\' content will all be dynamically generated, I cannot predict their height, I\'m simply using the 400px case for th

Answer 1

You can be clever with media queries, and clear the first item in the next row depending on the resolution size.

.regular {
    background: gray;
    height: 350px;
    margin-bottom: 30px;
}
.tall {
    background: red;
    height: 500px;
    margin-bottom: 30px;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .fix-row > div:nth-child(3) {
        clear: left;
    }
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .fix-row > div:nth-child(3) {
        clear: none;
    }
    .fix-row > div:nth-child(4) {
        clear: left;
    }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .fix-row > div:nth-child(3) {
        clear: none;
    }
    .fix-row > div:nth-child(4) {
        clear: none;
    }
    .fix-row > div:nth-child(5) {
        clear: left;
    }
}

        

            

                CONTENT
            
        
            

            

                CONTENT
            
        
        

            

                CONTENT
            
        
        

            

                CONTENT
            
        
        

            

                CONTENT
            
        
        

            

                CONTENT
            
        
        

            

                CONTENT
            
        
        

            

                CONTENT
            
        
        

            

                CONTENT
            
        

JSFiddle Example: http://jsfiddle.net/tkL8edwj/

How it Works:

I'm using media queries to determine when the last row item is, then using the CSS pseudo selector nth-child(n) to specify the last item in the row.

Since you are using col-lg-3, col-md-4, and col-md-6 for your grid item classes, I can know the first item in the next row based on the default Bootstap break points.

col-lg-4 breaks at a certain point (1200px), and because you are using 4 I know there are 3 items in the row (12/4 = 3). That means I can target every 5th div in the row and get the first item of each row, and then use clear: left to ensure it clears the float of the divs before it.

Same thing for the rest of the break-points. I'll notice I'm also resetting the clear to clear: none when necessary so the one's previously targets don't break at the wrong resolutions.