web-dev-qa-db-ja.com

Bootstrap 4でプッシュ/プルおよびcol-md-12を使用した列の順序付け

それぞれcol-md-12クラスを持つ2つの列があります。

デスクトップビューでは、次のように表示されます。

Col **1** 
Col **2**

モバイルビューでは、次のように表示されます。

Col **2**
Col **1**

これは、Bootstrapの列の順序付けでも可能ですか？

私の現在のコード：

<div class="row">
    <div class="col-xs-Push-12 col-md-12">
        Col 1
    </div>
    <div class="col-xs-pull-12 col-md-12">
        Col 2
    </div>
</div>
htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4
14
Cray

更新（2018年2月）-v4.0.0

bootstrap=がリリースされたので、 order ベータ版で実行できたユーティリティクラス（以下の古いアップデートを参照）、これら3つの新しいクラスが追加された点が異なります。

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

スニペット

.p-2 {
  background: red;
  border: white 5px solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-first order-lg-2">2</div>
</div>

古い更新（2017年10月）-v4.0.0ベータ

ベータ版のリリースでは、flexboxブートストラップのユーティリティ flex-order など）を使用してこれを行うことができます

（@ZimSystemからの回答を参照-アルファ版のソリューションを確認するには）

.p-2 {
  background: red;
  border: white 5px solid
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-1 order-lg-2">2</div>
</div>
21
dippas

2019年更新-Bootstrap 4.3 +

全幅、12ユニットcol-*-12列は、flexbox順序を使用して反転できます。

古いBootstrap 4アルファ版およびベータ版では、注文ユーティリティはflex-*...

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 flex-first flex-md-unordered">
        Col 2
    </div>
</div>

デモBootstrap 4 Alpha

Bootstrap 4.0.0現在、順序付けユーティリティはorder-*...

<div class="row">
    <div class="col-md-12">
        Col 1
    </div>
    <div class="col-md-12 order-first order-md-2">
        Col 2
    </div>
</div>

デモBootstrap 4.1.0

https://getbootstrap.com/docs/4.0/layout/grid/#order-classes のドキュメントを参照してください

22
Zim

これを回避する1つの方法は、Col 2の2つのバージョンを作成し、1つをCol 1の上に、もう1つをその下に置くことです。次に、 応答ユーティリティ を使用して、適宜非表示および表示します。

2
Taylor Foster

flexboxを使用してから、メディアクエリを使用して順序を変更できます。

.row {
  /* Setup Flexbox */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  /* Reverse Column Order */
  -webkit-flex-flow: column-reverse;
  flex-flow: column-reverse;
}

[〜＃〜] codepen [〜＃〜]

または（モバイルとタブレットではデフォルトの順序、デスクトップでは逆）：

@media (min-width: 992px) {
  .row {
    /* Setup Flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    /* Reverse Column Order */
    -webkit-flex-flow: column-reverse;
    flex-flow: column-reverse;
  }
}

[〜＃〜] codepen [〜＃〜]

2
max