モバイル(767px以下) | エクストラスモール=xs | col-xs-* |
タブレット(768px以上、991px未満) | スモール=sm | col-sm-* |
デスクトップ(992px以上、1199px未満) | ミディアム=md | col-md-* |
デスクトップ(1200px以上) | ラージ=lg | col-lg-* |
bootstrapの12分割HTML例
サムネイルの大きさを画面幅によって変える
<!-- rowで囲む--> <div class="row"> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> ~サムネイル1~ </div> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> ~サムネイル2~ </div> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> ~サムネイル3~ </div> <div class="col-xs-12 col-sm-4 col-md-3 col-lg-2"> ~サムネイル4~ </div> </div> <!-- /rowで囲む-->