web-dev-qa-db-ja.com

Bootstrap右のモバイルビューの上部の列

次のようなBootstrapページがあります。

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

次のようになります：

-----
|A|B|
-----

モバイルデバイスで見ると、列Aが一番上にありますが、Bを一番上にしたいです。これは可能ですか？プッシュアンドプルで試しましたが、うまくいきませんでした。

htmlcsstwitter-bootstrap-3
158
schnawel007

これを行うには、 列の順序 を使用します。

col-md-Push-6は列を右に「プッシュ」6し、col-md-pull-6は「md」以上のビューポートで列を左に「プル」します。小さいビューポートでは、列は再び通常の順序になります。

人々を落とすのは、HTMLでBをAの上に置かなければならないことだと思います。 AがHTMLでBを超えることができる別の方法があるかもしれませんが、どうすればいいのかわかりません...

DEMO

<div class="row">
  <div class="col-md-6 col-md-Push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

ビューポート> = md

|A|B|

ビューポート<md

|B|
|A|
255
Schmalzy

両方とも6に等しくない列を使用している場合、プッシュ量は初期列サイズと等しくないことに注意してください。

2つの列（A＆B）があり、列Aを「sm」以上のビューポートで小さく、右にしたいが、モバイル（xs）ビューポートの上にしたい場合、次を使用します。

<div class="row">
    <div class="col-sm-4 col-sm-Push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

そうしないと、列の配置がずれて表示されます。

75
apritch

Flexbox Direction

Bootstrap 4の場合、次のいずれかを.row divに適用します。

.flex-row-reverse

レスポンシブ設定の場合：

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse
22
salmanhijazi

以下のコードは私のために働く

.row {
    display: flex;
    flex-direction: column-reverse;
}
6
Sword I

Bootstrap 4で、大画面用に1つの注文と、小画面用に別の注文をしたいとします。

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

上記のorder-1およびorder-2は省略できます。わかりやすくするために追加しました。デフォルトの順序は、列がHTMLに表示される順序です。

詳細情報 https://getbootstrap.com/docs/4.1/layout/grid/#reordering

3
Abram

これはBootstrap 4で機能しました：

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>
2
tomb

これは、order-＃クラスを追加することにより（Bootstrap v4で）行われます。

https://getbootstrap.com/docs/4.1/migration/#grid-system-1 を参照してください

このような：

<div classname='col-md-8 order-2`>...</div>
<div classname='col-md-4 order-1`>...</div>
2
Onno Faber

私が使用した：

.row {
   display: flex;
   flex-direction: row-reverse;
}
1
Eric Conner

サイズが異なる3つのbootstrap 4列があります。画面が小さくなると3番目の列が非表示になり、画面がさらに小さくなりdivが積み重ねられると、列2が一番上になるように順序が変わります。

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

これがお役に立てば幸いです。私はこれを理解するのが難しいと感じましたが、ついにこのスレッドの助けを借りてそこに着きましたが、それは少しヒットとミスでした。

0
M61Vulcan

Bootstrap V4（2018年1月18日リリース）では、並べ替えクラスを使用できます。並べ替えタブの下の情報。

https://getbootstrap.com/docs/4.0/layout/grid/

0
Juan Mireles II

ブートストラップ4にはflexのクラスが含まれています。参照： https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>
0
heady12