モバイルビューの上部にあるブートストラップ右列

171

私はこのようなブートストラップページを持っています：

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

次のようになります。

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

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

html css twitter-bootstrap-3

— schnawel007
ソース

2

Bootstrap 4については、salmanhijaziの回答を参照してください

— schnawel007

268

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

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

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

デモ

<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|

— シュマルジ
ソース

6

@JackTheKnifeこの質問に対する他の回答を見てください...他の列の幅で列を押したり引いたりします。

— Schmalzy 2015

1

@Schmalzy Oええ-他の答えはより良い説明があります。：また、その有用であることが分かっscotch.io/tutorials/reorder-css-columns-using-bootstrap

— JackTheKnife

1

スタックの順序が中央、左、右である必要がある3つの列に問題があります。

— グース

78

両方とも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>

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

— 悪戯
ソース

オフセットが設定されている場合、これをどのように使用できますか<div class="col-md-4 col-md-offset-1"></div><div class="col-md-6 col-md-offset-1"></div>

— -Muddasir Abbas 2017

29

フレックスボックスの方向

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

.flex-row-reverse

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

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

— サルマンヒジャージ
ソース

Vuetifyで同じことを達成する方法はありますか？

— Rakibul Haq 2018

10

以下のコードは私のために働きます

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

— ソードI
ソース

10

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

— アブラム
ソース

5

これは、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>

— オンノフェイバー
ソース

4

サイズの異なる3つのブートストラップ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>

これがお役に立てば幸いです。これを理解するのは難しいと思いましたが、最終的にこのスレッドの助けを借りてそこにたどり着きました。

— M61バルカン
ソース

3

これは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

私が使用した：

.row {
   display: flex;
   flex-direction: row-reverse;
}

— エリック・コナー
ソース

0

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

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

— ファンミレレスII
ソース

0

Bootstrap 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>

— heady12
ソース