4 columns to 2 columns with Twitter Bootstrap

Answer 1

You'll just need to override the CSS for the spans in the @media query corresponding to tablets.

So you can try something like this:

// Tablets & small desktops only
@media (min-width: 768px) and (max-width: 979px) {
  [class*=span] {
    width: 50%;
  }
}

Of course, adjustments may need to be made. Because of padding and margins, the width may not actually be 50%.

Answer 2

Hmm. I tried both of those rules in my CSS and neither of them worked for me. It is a shame that this is missing in BS 2.0. I hope they add it in BS 3.0!

Thanks,

JK

Answer 3

I found out that Zurb Foundation (http://foundation.zurb.com/docs/grid.php#threeBlockEx) offers this fonctionality, but I want to continue with Twitter Bootstrap. So I've managed to add a custom rule, based on the technique that Foundation uses :

@media (min-width: 768px) and (max-width: 979px) {
    .row-fluid > [class*=span]:nth-child(2n+1) {
      clear: both;
      margin-left: 0;
    }
}

Answer 4

Adding to Emilie's answer you also need to reset the widths of the columns,

@media (min-width: 768px) and (max-width: 979px) {
    .row-fluid > [class*=span]:nth-child(2n+1) {
        clear: both;
        margin-left: 0;
    }

    .row-fluid .span3 {
        width: 48.61878453038674%;
    }
}