twitter-bootstrap - Bootstrap 3を使用して要素の表示順序を変更するにはどうすればよいですか

Question

誰かが私を助けてくれますか?ブートストラップを使用してこれを行う方法を考えようとしています。要素の表示順序を変更する方法がわかりません。フロートとクリアをいじっていると思います。助けてください。助けが必要です。レスポンシブ レイアウトに Bootstrap 3 を使用していますが、css のみを使用して表示順序を変更するにはどうすればよいですか?

Answer 1

@skelly は正しいです。プッシュ クラスとプル クラスを使用して、要素の表示順序を変更できます。これらのクラスは、常に正しい解決策を提供するとは限りません。

これについては他にも多くの質問があります。例を参照してください:モバイルでグリッドをスワップできるようにする必要がある

モバイル (xs グリッド) / タブレット ビュー (md グリッド) で 100% 幅の行 (黄色の行) を変更したい場合、フローティングおよび/またはプッシュ アンド プルではこれを解決できません。

また、いくつかのパラメーターを修正せずに CSS だけでこれを行うことはできないと思います。

さまざまなビューで既知/固定されているいくつかの要素の高さを考慮すると、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>

(負の) トップマージンを追加することにより、一部の要素が変更されることに注意してください。私は彼らの身長を知っている場合にのみこれを行うことができます. また、 float:left をcol-xs-12andに追加していることにも注意してcol-xs-12ください。

高さがわからない実際の状況では、javascript で計算してみて (メディア クエリには Respond.js を使用してください)、トップ マージンを追加します。jQueryを使用してDOMを操作する場合よりも、これがより良い解決策になるかどうかはわかりません。サイズ変更時に新しい行を追加し、列クラスを変更するを参照してください。