4 columns to 2 columns with Twitter Bootstrap

Question

I have a 4 columns fluid-layout:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">A</div>
        <div class="span3">B</div>
        <div class="span3">C</div>
        <div class="span3">D</div>
    </div>
</div>

[  A  ][  B  ][  C  ][  D  ]

For mobile devices, bootstrap renders the columns one under another, which works fine:

[            A             ]
[            B             ]
[            C             ]
[            D             ]

But for tablets, I'd like to have 2 columns of 2:

[      A     ][      B     ]
[      C     ][      D     ]

Is it possible achieve this behavior natively with bootstrap?

Answer 1

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