Flexbox を使って Bootstrap 3 のグリッドレイアウトをカスタマイズする方法
Bootstrap 3 でモバイルレイアウトにおける列の順序を変更する方法
Bootstrap 3 のグリッドシステムには、Order クラスと呼ばれる機能を使用して、特定のブレークポイントにおける列の順序を変更することができます。これは、モバイルデバイスなどの小さい画面で列のレイアウトを調整するのに役立ちます。
方法
- 変更したい列に
order-*クラスを追加します。ここで*は、列を配置したい順序を表す数字に置き換えます。数字が小さいほど、列は前面に表示されます。 - 必要に応じて、メディアクエリを使用して、異なるブレークポイントにおける列の順序を個別に設定できます。
例
次の例では、中規模の画面（sm）と大規模な画面（lg）で列の順序を変更する方法を示します。
<div class="row">
<div class="col-xs-6 col-sm-3 order-1">列 1</div>
<div class="col-xs-6 col-sm-3 order-2">列 2</div>
<div class="col-xs-12 col-sm-6 order-3">列 3</div>
</div>
この例では、中規模画面では 列 1 が最初に表示され、次に 列 2、最後に 列 3 が表示されます。大画面では、デフォルトの列順序に戻ります。
補足
order-*クラスは、Bootstrap 3 のすべてのバージョンで使用できます。order-*クラスは、他のグリッドレイアウトクラスと組み合わせて使用できます。
CSS の例
上記の HTML コードに加えて、次の CSS を使用して、列の外観をさらにカスタマイズすることもできます。
@media (min-width: 768px) {
.row {
display: flex;
flex-direction: row-reverse;
}
}
この CSS コードは、中規模画面と大画面で列の順序を逆転させます。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 列順序変更</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3 order-1">列 1</div>
<div class="col-xs-6 col-sm-3 order-2">列 2</div>
<div class="col-xs-12 col-sm-6 order-3">列 3</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>
CSS
@media (min-width: 768px) {
.row {
display: flex;
flex-direction: row-reverse;
}
}
説明
このコードは、次のようになります。
- Bootstrap 3 のグリッドシステムを使用して、3 つの列を配置します。
order-*クラスを使用して、中規模画面（sm）と大画面（lg）で列の順序を変更します。- 大画面では、デフォルトの列順序に戻ります。
実行方法
- 上記の HTML と CSS コードを
index.htmlなどのファイルに保存します。 - Web ブラウザで
index.htmlファイルを開きます。 - 画面サイズを変更して、列の順序がどのように変化するかを確認します。
- このコードはあくまで例であり、ニーズに合わせて変更する必要があります。
Bootstrap 3 でモバイルレイアウトにおける列の順序を変更するその他の方法
メディアクエリを使用して個別に列の幅を設定する
col-* クラスに加えて、メディアクエリを使用して、特定のブレークポイントにおける個々の列の幅を設定することもできます。これにより、列の順序を間接的に制御することができます。
<div class="row">
<div class="col-xs-12 col-sm-6">列 1</div>
<div class="col-xs-12 col-sm-6">列 2</div>
<div class="col-xs-12 col-sm-12">列 3</div>
</div>
@media (min-width: 768px) {
.row {
display: flex;
}
}
@media (min-width: 768px) {
.col-sm-6:first-child {
order: 2;
}
.col-sm-6:last-child {
order: 1;
}
}
この例では、中規模画面（sm）で列の順序を次のように変更します。
- 列 1 は、2 番目の列になります。
- 列 2 は、デフォルトの位置のままになります。
Flexbox を使用して、列の順序をより柔軟に制御することもできます。ただし、Flexbox は Bootstrap 3 のデフォルトのレイアウトシステムではないため、追加の CSS が必要になります。
<div class="row">
<div class="col-xs-12 col-sm-6">列 1</div>
<div class="col-xs-12 col-sm-6">列 2</div>
<div class="col-xs-12 col-sm-12">列 3</div>
</div>
@media (min-width: 768px) {
.row {
display: flex;
}
.col-sm-6:first-child {
order: 2;
}
.col-sm-6:last-child {
order: 1;
}
}
この例は、上記の Flexbox の例と似ていますが、Flexbox の機能を使用して、列の幅と順序をさらに細かく制御することができます。
JavaScript を使用して、列の順序を動的に変更することもできます。ただし、JavaScript はより複雑な方法であり、すべての開発者に適しているわけではありません。
<div class="row">
<div class="col-xs-12 col-sm-6" id="col1">列 1</div>
<div class="col-xs-12 col-sm-6" id="col2">列 2</div>
<div class="col-xs-12 col-sm-12" id="col3">列 3</div>
</div>
$(document).ready(function() {
$('#col1').insertBefore('#col3');
});
この例は、JavaScript を使用して、中規模画面（sm）で 列 1 を 列 3 の前に移動します。
- シンプルな方法が必要な場合は、order-* クラスを使用するのが最適です。
- より柔軟な制御が必要な場合は、メディアクエリと個別の列幅を使用するか、Flexbox を使用します。
- 動的な列順序変更が必要な場合は、JavaScript を使用します。
html css twitter-bootstrap
