ブートストラップ - 要素の順序を変更する

Question

私はcol-md-6と2つのdivを持っています。

は、私はそれがモバイル

ためCOL-XS-12に変更したいがためには、次のようになります。

ブートストラップを使用して、私は作るために何をすべき箱の上にあるボックスB

Answer 1

フレックスコンテナを使用して要素を注文することができます。

外側のdivは "display：flex;"に設定されています。内側の要素には順序が与えられます。要素Bには1の次数を、要素Aには2を与えます。要素Bは、Aがコードの最初にあってもAの前に置かれます。

ここに、私が書いたコードのサンプルビットがあります。

#flex-container{ 
    display: -webkit-flex; /* Safari */ 
    display: flex; 
} 

#a, #b{ 
    height: 200px; 
    width: 200px; 
} 

#a{ 
    order: 2; 
    background-color:#000; 
} 
#b{ 
    order: 1; 
    background-color:#575757; 
} 
<div id="flex-container"> 
    <div id="a"></div> 

    <div id="b"></div> 
</div> 

W3学校もここでアクションでフレックス発注の偉大なデモを持ってhttps://www.w3schools.com/cssref/tryit.asp?filename=trycss3_order

Answer 2

はCSSでフレックスボックスの「順序」プロパティを使用してみてください。

フレックスアイテムは、デフォルトでソースドキュメントに表示される順序と同じ順序で表示されます。 orderプロパティは、この順序付けを変更するために使用できます。 700pxの上に、それはAB（通常の動作）としてレンダリングされますが、700pxの下に、私は列にフレックスボックスの向きを変えています、上記のJSフィドルでhttps://jsfiddle.net/bhyqeq5x/

：

サンプル・コードは、あなたがこれを理解するためにそれはあなたの要求に従ってAとBの順番を変えながら、もう一方の下に現れます。

@media only screen and (max-width: 700px) { 
    .container {  
    flex-direction : column; 
    } 
    .A { 
    order : 2; 
    } 
    .B { 
      order : 1; 
    } 
} 

これはあなたに役立つかどうか私に下のコメントでお知らせください。

Answer 3

Bootstrap V4を使用している場合は、単にメディアクエリでflex-direction: row-reverse;を使用してください。

それとも

あなたはBootstrap V3を使用している場合は、単にcol-*のメディアクエリでfloat: right;を使用してのみ、CSSを使用して

<div class="col-xs-12 col-sm-6">B</div> 
    <div class="col-xs-12 col-sm-6">A</div>