Bootstrap網格示例：小型設備
假設我們有一個簡單的佈局有兩列。 我們想要的列被分割25%/75%為小型設備。
提示：小型設備被定義為具有768像素到991像素的屏幕寬度。
對於小型設備，我們將使用.col-sm-*類。
我們將添加下面的類來我們的兩列：
<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> 試一試» 下一章說明了如何添加不同的分裂％的媒體設備。