<div class="container">
<h3>全ての列に.oreder-クラスを設定した例</h3>
<div class="row">
<div class="col order-3">
<em>1番目に記述</em><br>
.order-3
</div>
<div class="col order-1">
<em>2番目に記述</em><br>
.order-1
</div>
<div class="col order-2">
<em> 3番目に記述</em><br>
.order-2
</div>
</div>
<h3>.order-クラス指定なし、.order-クラス指定ありを混在させた例</h3>
<div class="row">
<div class="col">
<em>1番目に記述</em><br>
.order-指定なし
</div>
<div class="col order-2">
<em>3番目に記述</em><br>
.order-2
</div>
<div class="col">
<em>3番目に記述</em><br>
.order-指定なし
</div>
<div class="col order-1">
<em>4番目に記述</em><br>
.order-1
</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;
font-size: 1.5em;
text-align: center;
margin-top: 1em;
}
em {
font-weight:bold;
font-style:normal;
font-size: 1.1em;
}
This Pen doesn't use any external JavaScript resources.