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:

<div class="col-md-4 col-sm-4 a"></div>
<div class="col-md-8 col-sm-8 b"></div>
<div class="col-md-8 col-sm-12 c"></div>

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');
    }

});

Answer 2

You can do it with some of the CSS from Bootstrap (just for the col-X-X widths and the padding) and additional CSS. It's better to not repeat content by hiding and showing.

If you want something .col-sm-4 and .col-md-4, using .col-sm-4 is all that is required. It's the same width from 768px and up.

If you want something full width always, at every viewport size, you don't need the grid at all, so col-xs-12 is not required and usually, col-md-12 or some other col-X-12 is not required if the class used on the column is in a higher media query. If there is no column class under the last one used, then it will automatically be full width under that min-width. For example, .col-md-4 under 992px will be full width so I don't have to writhe col-sm-12. I have col-sm-4 under 768px will be full width and everything from 768px and up will be 1/4 of 12, so I don't have to write col-xs-12.

DEMO: https://jsbin.com/huxofe

CSS

custom-grid .content-box {
    padding-top: 15px;
    padding-bottom: 15px;
}

@media (min-width:768px) { 
    .custom-grid .col-sm-4 {
        clear: right
    }

    .custom-grid .box-3 {
        clear: both
    }
}

@media (min-width:1200px) { 
    .custom-grid .col-lg-4 {
        clear: right
    }

    .custom-grid .col-lg-8 {
        float: right
    }

    .custom-grid .box-3 {
        clear: none
    }
}

HTML:

<div class="container">
   <div class="row custom-grid">
      <div class="col-sm-4 col-lg-4 content-box box-1">
         <h3>Content Box 1</h3>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      </div>
      <div class="content-box box-2 col-sm-8 col-lg-8">
         <h3>Content Box 2</h3>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      </div>
      <div class="content-box box-3 col-lg-8">
         <h3>Content Box 3</h3>
         <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
      </div>
   </div>
</div>