Twitter Bootstrap Nested Grid Drop Column

Question

Can this be done in Twitter Bootstrap using the same markup by just manipulating the row/column classes? I have laid it out with separate markup for the different sizes. Ideal

Answer 1

Demo for static height divs

This is achieved using pure Bootstrap. The css used here is just for the sake of demo(except the @media ).
HTML:

Demo CSS:

.a{ height:200px;background:red; }
@media (max-width:992px){ .a{ height:100px; } }
.b,.c{ height:100px; }
.b{ background:green; }
.c{ background:purple; }

---

Demo for dynamic height divs

Used jQuery

$(window).resize(function(){

    if (window.matchMedia('(min-width: 768px)').matches) {
        var a = $("#a").height();
        $("#b").height(a+'px');
     }
    if ((window.matchMedia('(min-width: 992px)').matches) || (window.matchMedia('(max-width: 768px)').matches) ) {
        $("#b").css('height','auto');
    }

});