css - 流体グリッドでのオブジェクトの表示方法を制御する

Question

私は自分のホームページをデザインするために Twitter ブートストラップを使用してきましたが、Twitter ブートストラップなどの CSS フレームワークでのメディア クエリの使用法について頭を悩ませています。私の例では、次のような 4 つの画像を表示しています。

<div class="container">
    <div class="row">
        <section>
            <article class="span3">
                <img src="gandalf1.jpg" />
            </article>
            <article class="span3">
                <img src="gandalf2.jpg" />
            </article>
            <article class="span3">
                <img src="gandalf3.jpg" />
            </article>
            <article class="span3 last">
                <img src="gandalf4.jpg" />
            </article>
        </section>
    </div>
</div>

セクションの行クラスと基本的なリセットにより、これは驚くほどうまく機能し、モバイルにうまく対応します。

私が望むのは、下にあるすべてのものを<section></section>ある種のコントラクトに強制して、何らかの方法で動作させることです。たとえば、ある時点で私の例では、画像が次々と垂直にリストされます。

たとえば、私の契約では、画像が元の順序を決して離れないようにしたい-（元の順序は水平、つまり4つの画像を含む1行、4つの画像を含む2行目など）、サイズを変更して幅の変更に対応する必要があります幅が 600px から 980px の間である場合、その範囲から抜け出すことはありません

@media screen and (min-width:600px) and (max-width:980px) { ... }

これを達成するために、私は多くのことを試しましたが、最初に考えたのは<section>andinline-blockを作成することでしたが、それは目的の効果を生み出すことができませんでした。クラスをやり直そうとする.rowと、それらの幅で非常に高い注文になるのではないかと心配しています.

私が書いたCSSコードを使用して解決策を探すことに力を注ぐべきですか、それとも.rowそれらの幅でクラスを変更しようとするべきですか?