デスクトップ（中型/大型デバイス）では横並びになる前に、開始時にスマホ/タブレット（小型デバイス）では縦積みになる、 基本的なグリッドシステムを作成します。（We will create a basic grid system that starts out stacked on mobiles/tablets (small devices), before becoming horizontal on desktops (medium/large devices).）
（訳注）Stacked-to-horizontal とは、大型デバイスでは複数のカラムが横並びに表示されるのに対し、
小型デバイスの場合は、カラムをブロックとして縦方向に表示すること。
次の例では、簡単な "stacked-to-horizontal" の 2 カラムレイアウトを示しています。これは、超小型の画面では自動的に 縦積み (100%) になる場合を除き、画面が 50%/50% に分割されることを意味しています：
<div class="container">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Try it Yourself »チップ: .col-sm-* クラス内の数値は、div が（12 のうちの）の何カラムに跨るかを示します。
そのため、.col-sm-1 は 1 カラム、.col-sm-4 は 4 カラム、
.col-sm-6 は 6 カラムに跨ります。
<
strong>注: 合計が 12 であることを常に確認してください！
チップ: .container クラスを .container-fluid に変更することで、
固定幅のレイアウトを全幅のレイアウトに変えることができます：
<div class="container-fluid">
<h1>Hello
World!</h1>
<div class="row">
<div
class="col-sm-6" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-6" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Try it Yourself »