ブートストラップ3を使用して要素の表示順序を変更するにはどうすればいいですか？

Question

誰かが私に助けてくれますか？私はどのように要素の表示順序を変更することができますかわからない、私は浮動小数点数を使用して遊んだと思います。 私は助けが必要な助けてください。 私はレスポンシブなレイアウトにBootstrap 3を使用していますが、どのように表示順序をCSSだけで変更できますか？

Answer 1

@skellyあなたはプッシュを使用して、要素の表示順序を変更するには、クラスを引く可能性があり権利です。これらのクラスは、常に適切なソリューションを提供するわけではありません。

これについては、他の多くの質問には、例えば参照、があります。Need to be able to swap grid on mobile

モバイル（XSグリッド）に100％の幅の行（黄色の行）を変更したい原因/タブレットビュー（MDグリッド）フローティングやプッシュ＆プルでは解決できません。

また、いくつかのパラメータを修正せずにCSSでthsiを実行することはできません。

私は異なるビューのために、固定/知られている、あなたのいくつかの要素の高さを考えると、私はCSSメディアクエリでそれを解決することができます：http://bootply.com/85303

CSS：

@media (max-width: 768px) 
{ 
.yellow {margin-top:-60px;} 
.orange {margin-top:40px;} 
.col-xs-12{float:left;} 
} 
@media (min-width: 992px) and (max-width:1199px) 
{ 
    .col-md-12 {float:left;} 
    .darkgreen{float:right; margin-top:-60px;} 
} 
@media (min-width: 1200px) 
{ 
.blue{margin-top:-60px} 
} 

HTML ：

<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12 col-md-12 col-xs-12" style="background-color:red;">&nbsp;</div> 
    </div> 

    <div class="row"> 
    <div class="orange col-lg-12 col-md-8 col-xs-12" style="background-color:orange;">&nbsp;</div> 
    <div class="yellow col-lg-8 col-md-12 col-xs-12" style=""> 
    <div class="row"> 
     <div class="col-lg-6 col-xs-12" style="background-color:yellow;height:40px;">1</div> 
     <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">2</div> 
     <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">3</div> 
     <div class="col-lg-6 visible-lg" style="background-color:yellow;height:40px;">4</div> 
    </div> 
    </div> 
    <div class="darkgreen col-lg-4 col-md-4 col-xs-12" style="background-color:darkgreen;">&nbsp;</div> 
    <div class="pink col-lg-8 col-md-12 col-xs-12" style="background-color:pink;">&nbsp;</div> 
    <div class="blue col-lg-4 col-md-12 col-xs-12" style="background-color:blue;height:40px;">&nbsp;</div> 
    </div> 

</div> 

一部の要素は変更されています（負の）トップマージンを追加することによって達成される。私は自分の身長を知っているときにのみこれを行うことができます。また浮動小数点数を追加することに注意してください：col-xs-12とcol-xs-12のための左。

高さが分からない現実の状況では、javascriptを使って計算することができます（メディアクエリの場合はrespond.jsを使用します）。 Add new row and changing column classes on resize