レスポンシブデザイン

画面の横幅によって、段組を変化させます。div要素に「.col-サイズ-ブロック数」(サイズ:xs/sm/md/lg)のクラスを適用します。複数のサイズのパターンを指定することもできます。このときは、画面の横幅に応じて、一番大きなサイズ用のクラスが有効となります。

smサイズ以上の時3カラム

OLYMPUS DIGITAL CAMERA
OLYMPUS DIGITAL CAMERA
OLYMPUS DIGITAL CAMERA

smサイズで2カラム、lgサイズで4カラム

OLYMPUS DIGITAL CAMERA
M.ZUIKO DIGITAL ED 12-40mm F2.8 PRO
LEICA DG SUMMILUX 25mm/F1.4 ASPH.
LEICA DG SUMMILUX 25mm/F1.4 ASPH.

<h2>smサイズ以上の時3カラム</h2>
<div class="row">
<div class="col-sm-4"><img src="https://tapioca-hiroyuki.net/wp-content/uploads/2016/08/IMG_1231-640x480.jpg" alt="OLYMPUS DIGITAL CAMERA" class="img-responsive size-large wp-image-1317" /></div>
<div class="col-sm-4"><img src="https://tapioca-hiroyuki.net/wp-content/uploads/2016/08/IMG_1274-640x480.jpg" alt="OLYMPUS DIGITAL CAMERA" class="img-responsive size-large wp-image-1318" /></div>
<div class="col-sm-4"><img src="https://tapioca-hiroyuki.net/wp-content/uploads/2016/08/P7182796_1-640x480.jpg" alt="OLYMPUS DIGITAL CAMERA" class="img-responsive size-large wp-image-1319" /></div>
</div>

<h2>smサイズで2カラム、lgサイズで4カラム</h2>
<div class="row">
<div class="col-sm-6 col-lg-3"><img src="https://tapioca-hiroyuki.net/wp-content/uploads/2016/08/P7182796_1-640x480.jpg" alt="OLYMPUS DIGITAL CAMERA" class="img-responsive size-large wp-image-1319" /></div>
<div class="col-sm-6 col-lg-3"><img src="https://tapioca-hiroyuki.net/wp-content/uploads/2016/08/P7312831_1-640x480.jpg" alt="M.ZUIKO DIGITAL ED 12-40mm F2.8 PRO" width="640" height="480" class="img-responsive size-large wp-image-1275" /></div>
<div class="col-sm-6 col-lg-3"><img src="https://tapioca-hiroyuki.net/wp-content/uploads/2016/05/PC220399_1-640x480.jpg" alt="LEICA DG SUMMILUX 25mm/F1.4 ASPH." width="640" height="480" class="img-responsive size-large wp-image-1181" /></div>
<div class="col-sm-6 col-lg-3"><img src="https://tapioca-hiroyuki.net/wp-content/uploads/2016/05/P5152502_1-640x480.jpg" alt="LEICA DG SUMMILUX 25mm/F1.4 ASPH." width="640" height="480" class="img-responsive size-large wp-image-1145" /></div>
</div>