Twitter Bootstrap (Responsive) - Additional Column After Certain Min Width

css, html, responsive-design, twitter-bootstrap

Solution

=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/

Problem

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?

Original source