Twitter bootstrap 引导网格会部分崩溃吗？

我正在使用bootstrap的网格系统。我有以下几节

A1 A2 A3
B1 B2 B3 B4

A是宽的，B是窄的。我希望它在一个窄屏幕上崩溃，以便：

A1
A2
A3
B1 B2 
B3 B4

换句话说，如果有空间的话，我不希望所有的b都在单独的行上。在一个非常小的显示器上，虽然它应该折叠为将每个B放在单独的一行上。这可能吗

这里有一个简单的例子

<div class="row">
    <div class="col-sm-4">
        Long test here
    </div>
    <div class="col-sm-4">
        Long test here
    </div>
    <div class="col-sm-4">
        Long test here
    </div>
</div>
<div class="row">
    <div class="col-sm-3">
        short
    </div>
    <div class="col-sm-3">
        short
    </div>
    <div class="col-sm-3">
        short
    </div>
    <div class="col-sm-3">
        short
    </div>
</div>

这里有很长的测试
这里有很长的测试
这里有很长的测试
短的
短的
短的
短的

jshiddle此处：

演示：

这取决于你所说的窄屏幕是什么意思。您只需在第一行

中将
col-sm-4
更改为
col-md-4
，并在992px下设置为全宽。在第二个
行中
将所有
col-sm-3
更改为
col-xs-6 col-sm-3
，并在该断点的12列之后添加响应实用程序clearfix。请参阅文档和演示链接

col-sm is 768px and up
col-md is 992px and up
col-lg is 1200px and up

如果在992px下有一个
.col md-*
，则该列将是全宽的

您的小提琴与您问题中的代码不匹配，我没有解决此问题。
谢谢，我忘记保存我现在的代码，但您的示例无论如何都胜过它。