.small|medium|large-* クラスの数値は、div が（12 以内の）またがるカラム数を示します。従って、.small-1 は 1 カラムに、.small-4 は 4 カラムに、.small-6 は 6 カラム
(各々の幅が 50%) に跨ります。注: 合計は、いつも 12 になることを確認してください！
ラップトップとデスクトップ (中型/大型デバイス)では横向きになる前に、スマホ/小型のタブレット（小型デバイス）では 縦積みになることでスタートする基本的なグリッドシステムを作成します。
次の例は、単純な "stacked-to-horizontal" の 2 カラムのレイアウトを示しています （効果を確認するには、ブラウザウィンドウのサイズを変更します）：
<div
class="row">
<div class="medium-6
columns" style="background-color:yellow;">
<p>Lorem
ipsum..</p>
</div>
<div class="medium-6
columns" style="background-color:pink;">
<p>Lorem ipsum..</p>
</div>
</div>
結果：
Lorem ipsum..
Lorem ipsum..
|
チップ: .small|medium|large-* クラスの数値は、div が（12 以内の）またがるカラム数を示します。従って、.small-1 は 1 カラムに、.small-4 は 4 カラムに、.small-6 は 6 カラム
(各々の幅が 50%) に跨ります。注: 合計は、いつも 12 になることを確認してください！ |
|---|