デバイス別の設定方法
ここまでの例では、「col-md-数字」というように真ん中を"md"と記述していましたが、md以外の文字列を指定することで、デバイスのサイズに応じたレイアウトを指定できます。
| 区分 |
極小サイズ （スマホ：768px未満） |
小サイズ （タブレット：768px以上） |
中サイズ （PC：992px以上） |
大サイズ （1200px以上） |
|---|---|---|---|---|
| クラス名 | .col-xs-数字 | .col-sm-数字 | .col-md-数字 | .col-lg-数字 |
|
コンテナ 最大幅 |
auto | 750px | 970px | 1170px |
|
各カラム 最大幅 |
auto | 60px | 78px | 95px |
下記のHTMLでは、PCサイズに加えスマホサイズを「col-xs-8」「col-xs-4」「col-xs-12」と指定しています。これによって、1つ目と2つ目のボックスが2対1で表示された後、3つ目のボックスが下に表示されます（Bootstrapでは、12カラムを超える場合は縦方向に積まれて表示されます）。そしてPCサイズの992pxより大きい場合には、4対4対4の均等幅で表示されます。
<!-- 行の指定 -->
<div class="row">
<!-- 1つ目(スマホ8) -->
<div class="col-md-4 col-xs-8">
<h2>Getting started</h2>
（中略）
</div>
<!-- 2つ目(スマホ4) -->
<div class="col-md-4 col-xs-4">
<h2>Get more libraries</h2>
（中略）
</div>
<!-- 3つ目(スマホ12) -->
<div class="col-md-4 col-xs-12">
<h2>Web Hosting</h2>
（中略）
</div>
</div>
デザインは小さいサイズから順に適用されます。そのため、xs（スマホ）サイズで適用したデザインはsm（タブレット）サイズにも適用されます。この例では、幅が992pxを超えたときに、md（PC）サイズのレイアウトが有効になります。
グリッドの高度な制御（並び順の変更と場所の移動）
Bootstrapのグリッドシステムでは、「col-md-pull-数字」「col-md-push-数字」「col-md-offset-数字」を指定して、カラムの場所を移動したり並び順を変えたりすることもできます。
<!-- 行の指定 -->
<div class="row">
<!-- 1つ目(右に4つ移動) -->
<div class="col-md-4 col-md-push-4">
<h2>Getting started</h2>
（中略）
</div>
<!-- 2つ目(左に4つ移動) -->
<div class="col-md-4 col-md-pull-4">
<h2>Get more libraries</h2>
（中略）
</div>
<!-- 3つ目(左に2つ分の隙間) -->
<div class="col-md-2 col-md-offset-2">
<h2>Web Hosting</h2>
（中略）
</div>
</div>
「col-md-pull-数字」はその領域を前方に移動（rightプロパティを適用）させ、「col-md-push-数字」はその領域を後方（leftプロパティを適用）に移動させます。ここでは、タグの記述順とは逆になるように1つ目のボックスと2つ目のボックスの順序を入れ替えています。「col-md-offset-数字」は、左側に隙間を入れてボックスを右に寄せる（margin-leftプロパティを適用）ことができます。もちろん、md以外のxs／sm／lbを指定してデバイス別に設定することもできます。
