Bootstrap 3 モバイルカラム順変更
2024-10-01
Bootstrap 3 のモバイルレイアウトにおけるカラム順序の変更方法
日本語解説
Bootstrap 3 では、メディアクエリを使用して、異なるスクリーンサイズに応じてカラムの順序を変更することができます。モバイルレイアウトでは、カラムをスタックして、縦列に並べるのが一般的です。
HTML
<div class="row">
<div class="col-md-6">カラム1</div>
<div class="col-md-6">カラム2</div>
</div>
CSS
@media (max-width: 767px) {
.row {
flex-direction: column;
}
}
解説
- HTML で、
rowクラスとcol-md-6クラスを使用してカラムを定義します。 - CSS で、メディアクエリ
@media (max-width: 767px)を使用して、画面幅が 767px 以下の場合にのみスタイルを適用します。 rowクラスにflex-direction: column;を設定することで、カラムを縦列に並べます。
ポイント
flex-direction: column;は、Flexbox レイアウトを使用してカラムを縦列に並べる方法です。- メディアクエリを使用して、異なるスクリーンサイズに応じて異なるスタイルを適用することができます。
col-md-6は、中型デバイス（768px 以上）でカラムが 6/12 の幅を占めることを示します。モバイルレイアウトでは、このクラスは無視されます。
<div class="row">
<div class="col-md-6">カラム1</div>
<div class="col-md-6">カラム2</div>
</div>
@media (max-width: 767px) {
.row {
flex-direction: column;
}
}
<div class="row">
<div class="col-md-6">カラム1</div>
<div class="col-md-6">カラム2</div>
</div>
@media (max-width: 767px) {
.row {
flex-direction: column;
}
}
- CSS Grid
CSS Grid レイアウトを使用すると、より柔軟なカラム配置が可能になります。 - JavaScript
JavaScript を使用して、カラムの DOM 要素を動的に操作し、順序を変更することもできます。 - Bootstrap 4 以降
Bootstrap 4 以降では、orderクラスを使用してカラムの順序を直接指定することができます。
html css twitter-bootstrap
