Bootstrapのグリッドシステム | Bootstrap grid system

Bootstrapのグリッドシステムは画面の横幅がブレイクポイントより大きいときに、パーツをどのくらいの幅で表示するかを「col- * - * 」というクラス名で指定する仕組みになっています。| Bootstrap's grid system is designed to specify how wide a part should be displayed with the class name "col-*-*" when the width of the screen is larger than the breakpoint.

用意されたブレイクポイントは768、992、1200ピクセルの３つで、それぞれのパーツの幅は「col-sm-*」「col-md-*」「col-lg」というクラス名で指定します。これらのクラス名は複合的にも使用することができます。| There are three breakpoints prepared, 768, 992, and 1200 pixels, and the width of each part is specified by the class names "col-sm- *", "col-md- *", and "col-lg". These class names can also be used in combination.

HTML

<div class="container">
<div class="row">

<!-- タイトルA, -->
<div class="col-sm-12 col-md-4">
<div class="title">
<div id="waku">
<h1>タイトルA</h1>
<p>BON JOVI</p>
</div>
</div>
</div><!--col-->

<!-- タイトルB, -->
<div class="col-sm-6 col-md-4">
<div class="title">
<div id="waku">
<h1>タイトルB</h1>
<p>DREAM THEATER</p>
</div>
</div>
</div><!--col-->

<!-- タイトルC, -->
<div class="col-sm-6 col-md-4">
<div class="title">
<div id="waku">
<h1>タイトルC</h1>
<p>Mr BIG</p>
</div>
</div>
</div><!--col-->

</div><!--row-->
</div><!--container-->