2 カラムの簡単なレイアウトを想定します。小型デバイス用にカラムを 25%/75% に分割するとします。
チップ: 小型デバイスとは、画面の幅が 768 ピクセル ～ 991 ピクセルのものと定義されています。
小型デバイスには、.col-sm-* クラスを使用します。
2 つのカラムに、次のクラスを追加します：
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>
今、Bootstrap は「小型サイズでは、-sm- を持つクラスを探し、それを使用する。」と言おうとしています。
下の例は、結果として、小型（および中型と大型）デバイスでは 25%/75% に分割されます。 極小型では、自動的にスタック（100%）されます：
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-3" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-9" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Try it Yourself »注: 合計が 12 であることを常に確認してください。
33.3%/66.6% に分割するためには、.col-sm-4 と .col-sm-8 を使用する必要があります：
<div class="container-fluid">
<h1>Hello World!</h1>
<div
class="row">
<div class="col-sm-4" style="background-color:yellow;">
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-8" style="background-color:pink;">
<p>Sed ut perspiciatis...</p>
</div>
</div>
</div>
Try it Yourself »次の章では、中型デバイスへ別な分割パーセントを追加する方法を示します。