様々な配置

上記から分かるように、１行に表示される要素が使用する区分は合計で１２に収まらなければなりません。
収まらなかった場合には、はみ出る要素が２行目に回り込みます。

３・３・８マスで記述を行った場合

９・１０・３・４・６マスで記述を行った場合

このように１行の合計が１２マスを超えるタイミングで配置できない要素に関しては、次の行に回りますので気をつけてください。

それらを踏まえれば、行ごとに切り替わった配置も可能です。

空白(余白)をあけたい場合には、"offset-XX"を使用します。"offset-XX"は、marginで配置を調整してくれます。

offset-XXは、クラスを付加した要素の前(左)に空白を設けます。

３・３・４(空白)・２・３(空白)・４・１(空白)・２マスで記述を行った場合

ウィンドウを小さくしたときに、コンテンツの表示が２行になり高さが変化すると思います。
『col-XX』ではあくまで、横幅に対してのみの指定しています。 そのためコンテンツがその幅に収まらない場合、高さを指定していなければ高さが自動で変動し、コンテンツを全て表示しようとします。

また、それに応じて同じ行の幅にコンテンツが収まっているはずの要素の高さも変動するので注意してください。