グリッドシステム
container > row > col の3層で、12カラムのレスポンシブレイアウトを構成します。
row は Flexbox のコンテナ、col は各カラムです。ブレークポイント接頭辞で画面幅ごとの挙動を指定します。
<div class="container">
<div class="row">
<div class="col-12 col-md-6 col-lg-4">A</div>
<div class="col-12 col-md-6 col-lg-4">B</div>
<div class="col-12 col-md-12 col-lg-4">C</div>
</div>
</div>ブレークポイント（5系）:
| 接頭辞 | 名称 | 最小幅 |
|---|---|---|
| （なし） | xs | < 576px |
| sm | Small | ≥ 576px |
| md | Medium | ≥ 768px |
| lg | Large | ≥ 992px |
| xl | Extra large | ≥ 1200px |
| xxl | Extra extra large | ≥ 1400px |
ガター（列間の余白）は g-* / gx-* / gy-* で調整します。等幅は col、可変幅は col-auto、任意割合は col-{1..12} を指定します。
