Bootstrapでcolumnの順番入れ替え

4421 ワード
Bootstrap HTML5 bootstrap4 HTML5 テキストリンク

column順番はorder-*で指定できる

デフォルトの順序をorder-* (*=1, 2, 3, ...)で指定し、サイズに依存する順序をorder-md-*とすれば良い。
下記のように設定すると、サイズがMedium以上のときはorder-md-*に従うので、
column #1 -> column #2 -> column #3
の表示順となるが、Small以下のときはデフォルトの順序、order-*に従うので、
column #3 -> column #1 -> column #2
となる。

column-order.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>column-order</title>
  </head>
  <body>
    <div class="container">
      <h1 class="text-primary">Mai's Test Code</h1>
      <h2 class="text-info">column-order</h2>
      <h3 class="text-secondary d-sm-none">Extra small</h3>
      <h3 class="text-secondary d-md-none d-none d-sm-block">Small : Smartphone</h3>
      <h3 class="text-secondary d-lg-none d-none d-md-block">Medium : Tablet</h3>
      <h3 class="text-secondary d-xl-none d-none d-lg-block">Large : PC</h3>
      <h3 class="text-secondary d-none d-xl-block">Extra large : Large Display</h3>
      <div class="row border">
        <div class="col border order-2 order-md-1 bg-primary text-white">
          column #1
        </div>
        <div class="col border order-3 order-md-2 bg-success text-white">
          column #2
        </div>
        <div class="col border order-1 order-md-3 bg-info text-white">
          column #3
        </div>
      </div>
    </div>
  </body>
</html>

結果は次の通り。

画面サイズ：Medium

画面サイズ：Small