ブートストラップグリッド要素の順序（別の要素の上下）

ブートストラップで注文する方法を理解しようとしています。私は縦または横についています。等ブートストラップグリッド要素の順序（別の要素の上下）

デスクトップディスプレイ：

[ - 2 - ] [1]
[ - 2 - ] [3]
[ - 2 - ]

モバイルのように表示されるはず：

[ - 1 - ]
[ - 2 - ]
[ - 2 - ]
[ - 2 - ]
[ - 3 - ]

[2]は単なる要素であり、ちょうど高いです。

これは私がどれくらい得るかです。それは明らかに間違っています。なぜなら、それはデスクトップ上では見えますが、モバイル上では見えないからです。

<div class="container"> 
<div class="row"> 
    <div class="col-sm-4 col-sm-push-8"> 
     <div class="row"> 
      <div class="box-a col-sm-12">1</div> 
      <div class="box-b col-sm-12">3</div> 
     </div> 
    </div> 
    <div class="box-c col-sm-8 col-sm-pull-4">2</div> 
</div> 
</div>

http://jsfiddle.net/6L2otx3w/

私は列に動けなくなります。しかし、私は携帯電話を最初にしようとした場合：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-4 col-sm-push-8 box-a"> 1</div> 
     <div class="box-c col-sm-8 col-sm-pull-4">2</div> 
    </div> 
    <div class="row"> 
    <div class="box-b col-sm-4 col-sm-offset-8"> 3</div> 
    </div> 
<div>

http://jsfiddle.net/yvdf5p8k/

は、私が行にはまり込む（モバイル上の罰金ではなく、デスクトップ上に見えます）。

出典

2016-12-22 Elias

私は、携帯電話（xs）で列を引っ張って12列に設定しました。 smのブレークポイントは、あなたが望むものに変更することができます。

フィドルチェックアウト：私はブートストラップが能力はそれを行う必要はありませんだと思うhttp://jsfiddle.net/heraldo/yvdf5p8k/1/

<div class="container"> 
    <div class="row"> 
     <div class="box-a col-xs-12 col-sm-4 pull-right"> 1</div> 
     <div class="box-c col-xs-12 col-sm-8 pull-left">2</div> 
     <div class="box-b col-xs-12 col-sm-4 pull-right"> 3</div> 
    </div> 
</div>

出典

2016-12-22 23:58:38 heraldo

ありがとうございました

「私は「プル右」と「プル左」に関する文書をどこで見つけることができますか？ unlinke "col-xx-push-x"私はブートストラップのドキュメントでそれを見つけることはありません。 – Elias

@Elias - シンプルなフロートクラスです。 CSSタブの「クイック浮動小数点」の下にそれらを見つけることができます。ここにリンク：https://getbootstrap.com/css/#helper-classes-floats。また、この回答がうまくいったら、答えを探している他の人には受け入れられたとマークすることを忘れないでください！ – heraldo

を。

[ - 2 - ] [1]

[ - 2 - ] [3]

[ - 2 - ]

移動は次のように表示されるはず：

[ - 1 - ]

[ - 2 - ]

[ - 3 - ]

これがOKであるような場合。

[ - 2A - ] [1]

[ - 2B - ] [3]

[ - 2C - ] [4]

移動は次のように表示されるはず：[

- 1 - ]

[ - 2A - ]

[ - 3 - ]

[ - 2B - ]

[ - 4 - ]

[ - 2C - ]

<head> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="bg-primary col-sm-4 col-sm-push-8">1</div> 
 
    <div class="bg-danger col-sm-8 col-sm-pull-4">2a</div> 
 
    <div class="bg-warning col-sm-4 col-sm-push-8">3</div> 
 
    <div class="bg-success col-sm-8 col-sm-pull-4">2b</div> 
 
    <div class="bg-primary col-sm-4 col-sm-push-8">4</div> 
 
    <div class="bg-info col-sm-8 col-sm-pull-4">2c</div> 
 
    </div> 
 
</div>

出典

2016-12-23 04:12:55

私は使用して、それを解決しようとしましたブートストラップが私たちに与えるデフォルトのクラスですが、私はその方法を見つけることができませんでしたので、私はthisを選択しました：

HTML

あなたは "3"がモバイル上のそれが注文可能作るために複製され行を見ることができるように。

<div class="container"> <div class="row"> <div class="col-sm-4 col-sm-push-8"> <div class="row"> <div class="box-a col-sm-12">1</div> <div class="box-b col-sm-12">3</div> </div> </div> <div class="box-c col-sm-8 col-sm-pull-4">2</div> <div class="box-b2 col-xs-12">3</div> </div> </div>

CSS

私は、デスクトップ上のに箱-B2モバイルと表示なしに表示なしに箱-Bを追加することによって、それをやりました。

.box-b { background-color: lavender; display:none; } .box-b2 { background-color: lavender; } .box-c { background-color: orange; height: 60px;} @media (min-width: 768px) { .box-b{ display:block; } .box-b2{ display:none; } }

もしあなたが助けてくれたら教えてください。もしあなたが欲しいものでしたら、ありがとうございます。

出典

2016-12-23 18:28:04

ちょっとシド、それは動作しますが、私は重複して隠れている要素を避けたかったのです。だから私はもう少しエレガントな答えを見つける。 – Elias

ブートストラップグリッド要素の順序（別の要素の上下）

答えて

関連する問題