css - Twitter Bootstrap: ビューポートのサイズに応じてクラスを切り替えますか?

Question

次のマークアップがあるとします。

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

そして、do-not-display...メディアクエリを使用してクラスを非表示または表示するだけです。

これは、「同じことを繰り返すな」というルールに違反しているため、恐ろしい解決策です。ブレークポイントが 5 つあるとすると、ブレークポイントごとに 5 つの異なるコンテナーを作成する必要があります。それは醜いです。

だから、もっとエレガントな解決策があるかどうか疑問に思っていますか?

PS: Bootstrap の LESS mixins または bootstrap-sass を使用し@includeて、必要な各クラスの mixin に使用できることはわかっていますが、別の解決策はありますか?