使用 Twitter Bootstrap 将 4 列变为 2 列

我有一个 4 列流体布局：

<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  ]

对于移动设备，引导程序将列逐一渲染，效果很好：

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

但对于平板电脑，我想要 2 列，每列 2 列：

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

是否可以通过引导程序本地实现此行为？

我发现 Zurb 基金会（http://foundation.zurb.com/docs/grid.php#thirdBlockEx http://foundation.zurb.com/docs/grid.php#threeBlockEx）提供了此功能，但我想继续使用 Twitter Bootstrap。因此，我设法根据 Foundation 使用的技术添加自定义规则：

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