<div class="container">
<h3>最小サイズ(xs)にのみ、.col-*クラスを使用した例</h3>
<div class="row">
<div class="col">
3つの列の1列目<br>
.col
</div>
<div class="col">
3つの列の2列目<br>
.col
</div>
<div class="col">
3つの列の3列目<br>
.col
</div>
</div>
<h3>小サイズ(sm)にのみ、.col-*クラス(col-sm-*)を使用した例</h3>
<div class="row">
<div class="col-sm">
3つの列の1列目<br>
.col-sm
</div>
<div class="col-sm">
3つの列の2列目<br>
.col-sm
</div>
<div class="col-sm">
3つの列の3列目<br>
.col-sm
</div>
</div>
</div>
.row > [class*=col] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
.row {
margin-top: 1rem;
}
h3 {
margin-top: 1rem;
}
This Pen doesn't use any external JavaScript resources.