Bootstrap3 3-column layout to 2-column - twitter-bootstrap-3

Question

I,m trying to make a responsive website using bootstrap3 that is 3-column in large screens and 2-column in medium:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4" id="sidebar1"></div>
<div class="col-lg-6 col-md-8" id="main"></div>
<div class="col-lg-3 col-md-4" id="sidebar2"></div>
</div>
</div>
http://www.bootply.com/yfJF1flD0V
but this code not working properly and on medium size, sidebar2 goes in a new row and i want sidebar2 goes below sidebar1 directly. how can i do that?

Answer 1

You've got to duplicate some of your content and use hidden-lg and visible-lg.
DEMO ON BOOTPLY
<div class="container">
<div class="row">
<!-- on md only -->
<div class="col-md-4 hidden-lg">
<div class="row">
<div class="col-md-12 grey1">
Sidebar 1 md - Lorem ipsum dolor sit amet...
</div>
<div class="col-md-12 grey2">
Sidebar 2 md - Lorem ipsum dolor sit amet...
</div>
</div>
</div>
<!-- on lg only -->
<div class="col-lg-2 visible-lg">
Sidebar 1 lg - Lorem ipsum dolor sit amet...
</div>
<div class="col-lg-2 col-lg-push-8 visible-lg">
Sidebar 2 lg - Lorem ipsum dolor sit amet...
</div>
<!-- on all -->
<div class="col-md-8 col-lg-pull-2">
Main all - Lorem ipsum dolor sit amet...
</div>
</div>
</div>
Because of the requirement to stack your sidebars on md screens with main content to their right, you've got to put the sidebars in a containing column. But that containing column then makes it so you can't bookend your sidebars around that same main content in lg screens. Hence the need to use visible and hidden. I always feel like they're a bit clunky, but otherwise I think you won't get exactly what you want...

Answer 2

I do it with jQuery.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4" id="sidebar1"></div>
<div class="col-lg-6 col-md-8" id="main"></div>
<div class="col-lg-3 col-md-4" id="sidebar2"></div>
</div>
</div>
and jQuery:
function mediumResponsive() {
// Reset everything
$( '#main>div' ).removeClass('col-md-8');
$("#sidebar1").next().andSelf().unwrap();
$( "#sidebar2" ).insertAfter( $( "#main" ) );
if ($('#is-md').is(":visible")) {
// Do medium responsive
$( "#sidebar2" ).insertAfter( $( "#sidbar1" ) );
$("#sidebar1").next().andSelf().wrapAll('<div class="col-md-4"><div class="container-fluid"');
$( '#main>div' ).addClass('col-md-8');
};
};
$(document).ready(mediumResponsive);
$(window).bind( "resize", mediumResponsive );
and it works.
Please tell me your comments.