Css Twitter引导：根据视口大小切换类？

假设我有以下标记：

<div class="span6"></div>
<div class="span6"></div>

现在让我们假设，如果视口小于600px，我希望使div跨越整个容器，如下所示：

<div class="span12"></div>
<div class="span12"></div>

我的解决方案如下：

<div class="do-not-display-below-600px">
    <div class="span6"></div>
    <div class="span6"></div>
</div>

<div class="do-not-display-above-600px">
    <div class="span12"></div>
    <div class="span12"></div>
</div>

只需使用媒体查询隐藏或显示

不显示…

类

这是一个可怕的解决方案，因为它违反了“不要重复你自己”的规则。假设我有5个断点，我必须为每个断点创建5个不同的容器。那太难看了

所以我想知道是否有更优雅的解决方案

---

PS：我意识到我可以使用Bootstrap的较少混合或Bootstrap sass来

@将

混合包含到我需要它们的每个类中，但是还有其他解决方案吗？

为什么不直接使用媒体查询，并覆盖Bootstrap自己定义的样式？是的，使用媒体查询来修补Bootstrap。有时，您需要做的不仅仅是使用预定义的解决方案。我真的不喜欢这个解决方案，因为如果Bootstrap出现了新版本，我不能只更新Bootstrap的

.css

文件……Twitter是在设计你的网站还是你？这个例子就是为什么整个网格

span6

/

span12

命名约定是个坏主意，毫无意义。