Bootstrapのcol指定とレスポンシブ挙動の基本

重要なのは、ブレークポイント。

基本の仕組み

Bootstrap のグリッドは ブレークポイントごとにクラスを分けて指定する。
「どの画面幅から適用するか」を決めるのが -sm-, -md-, -lg-, -xl-, -xxl-。

詳しくは、下記を読む

例：.col-md-6

• md (768px以上) の画面で → 幅 = 6/12 = 50%
• 768px未満の画面では → 指定が効かない → 自動的に幅100%（縦並び）

⸻

具体例

<div class="row">
  <div class="col-md-6">左</div>
  <div class="col-md-6">右</div>
</div>

• スマホ (<768px)
  → col-md-6 が効かないので 縦並び（幅100%）
• タブレット以上 (≥768px)
  → 2つのカラムが横に並んで それぞれ幅50%

⸻

もしブレークポイントを付けない場合

<div class="row">
  <div class="col-6">左</div>
  <div class="col-6">右</div>
</div>

• col-6 は 常に幅50%
• スマホでもPCでも変わらない → つまり「常時横並び」になる

⸻

まとめ

• .col-md-6 のようにブレークポイントを付けると、 その幅以上で適用
  （未満では100%幅になる = レスポンシブに対応）
• .col-6 のようにブレークポイントなしだと、 常に指定幅を使う

⸻