Bootstrapグリッド例：小型デバイス
我々は2列を持つシンプルなレイアウトを持っていると仮定します。 私たちは列を分割することにしたい25%/75%小型デバイス用に。
ヒント：小さなデバイスが991ピクセルに768画素から画面の幅を有するものとして定義されています。
小型デバイスのために我々は使用する.col-sm-*クラスを。
私たちは、2列に次のクラスが追加されます。
<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>今、 Bootstrap 「小さなサイズで、持つクラスを探し言おうとされている-sm-その中に、それらを使用します」。
次の例では、になります25%/75%小（および中規模および大規模）デバイス上の分割。 余分な小型デバイスで、それは自動的に（100％）スタックします。
COL-SM-3
COL-SM-9
例
<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> »それを自分で試してみてください 注：合計が常に12まで追加されていることを確認します。
33.3％/ 66.6パーセントの分割では、使用する.col-sm-4と.col-sm-8 ：
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> »それを自分で試してみてください 次の章では、メディアデバイスのための別の分割パーセントを追加する方法を示します。