Question

I’m working with Twitter Bootstrap and using a fluid design with media queries to make it a responsive design.

So far, I have the design working to be “responsive” with a sample 2 column layout. However, what I need to do is after 1200px min-width add an additional sidebar column.

So if my 1024 layout has:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span8">
              .....
        </div>
        <div class="span4 last">
              ..sidebar junk..
        </div>
    </div>
</div>

I would need the 1200px version to effectively be something like:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span6">
              .....
        </div>
        <div class="span3">
              ..sidebar junk..
        </div>
        <div class="span3 last">
              ..sidebar 2 junk..
        </div>

    </div>
</div> 

Or something to that effect. And then when the user scaled back down below 1200px, remove that second span3 and make the 1st span3 a span4 again. See http://www.smashingmagazine.com/ for a very complex version of what I am asking about. As you increase screen resolution, side bars are added for content.

How are we to achieve this effect with Bootstrap?

Answer 1

=Quite easy to do with a bit of jQuery.

Add and id to your divs and add/remove span classes and css on ready and resize.

<div class="container-fluid">
  <div class="row-fluid">
    <div id="one">
      .....
    </div>
    <div id="two">
      ..sidebar junk..
    </div>
    <div class="span3" id="three">
      ..sidebar 2 junk..
    </div>
  </div>
</div>

&

function sizing() {
  var windowwidth=$(window).width();
  if(windowwidth>=1200){
    $('#one').removeClass('span8').addClass('span6');
    $('#two').removeClass('span4').addClass('span3');
    $('#three').css('display','inline');
  } else {
    $('#one').removeClass('span6').addClass('span8');
    $('#two').removeClass('span3').addClass('span4');
    $('#three').css('display','none');
  }          
}
$(document).ready(sizing);
$(window).resize(sizing);

http://jsfiddle.net/baptme/9MYTZ/4/