web-dev-qa-db-ja.com

Bootstrap4で列を注文する

デスクトップとモバイルで異なる方法で注文したい3つの列があります。現在、私のガードは次のようになっています。

<div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>

モバイルビューでは、次の出力が必要です。

1-3-2

残念ながら、Bootstrapの.col-md-Push-*クラスと.col-md-pull-*クラスでこれを解決する方法がわかりません。

cssbootstrap-4grid
56
Cray

これは、CSSの「Order」プロパティとメディアクエリでも実現できます。

このようなもの：

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

CodePenリンク： https://codepen.io/preston206/pen/EwrXqm

13
bprdev

私はBootstrap 3を使用しているので、もっと簡単な方法があるかどうかわかりませんBootstrap 4ですが、このcssはあなたのために動作するはずです：

.pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}

... 2番目の列にクラスを追加します。

<div class="row">
    <div class="col-xs-3 col-md-6">
        1
    </div>
    <div class="col-xs-3 col-md-6 pull-right-xs">
        2
    </div>
    <div class="col-xs-6 col-md-12">
        3
    </div>
</div>

編集：

ああ...それは私が上で書いたものがまさにそうであるように見える.pull-xs-right Bootstrap 4のクラス：X完全に。

2
Marek Kus

これでも動作します：

<div class="container">
            <div class="row">
                <div class="col-4 col-sm-4 col-md-6 order-1">
                    1
                </div>
                <div class="col-4 col-sm-4  col-md-6 order-3">
                    2
                </div>
                <div class="col-4 col-sm-4  col-md-12 order-2">
                    3
                </div>
            </div>
          </div>
1
nikhil sugandh