2016-08-24 11 views
0

ブレークポイントが大きいときに列の順序を反転する必要がある3列のグリッドがあります。大ブレークポイントの列で ブートストラップで3列グリッドの順序を反転する

  • col2にcol1のcol3というを表示すべき小さなブレークポイントカラムで

    1. は、メディアブレークポイントの列で
    2. col3というcol2にcol1のが表示されるはずです

    COL 1 COL2 col3というを表示する必要があります。このJSFiddleは正常に動作しますcol-smおよびcol-mdブレークポイントの場合私は、希望の大きなブレークポイントの動作(上記の条件3)に影響するプッシュ/プルクラスを追加しようとしましたが、動作させることができません。私は、col-mdでも起こる注文によってうまくいっていると思う。私は小、中、大の注文行動が欲しいです。これはどのように達成されますか?

    <div class="container"> 
        <div class="row-fluid"> 
        <div class="col-xs-12 col-sm-12 col-md-3 col-md-push-9 bg-warning"> 
         column 3 
        </div> 
        <div class="col-xs-12 col-sm-12 col-md-5 col-md-pull-3 bg-danger"> 
         Column 2 
        </div> 
        <div class="col-xs-12 col-sm-12 col-md-4 col-md-pull-3 bg-success">Column 1 
        </div> 
        </div> 
    </div> 
    
  • +0

    Jacquelynでenvとarrangeの列を確認できます – hpfs

    答えて

    0

    私はついにそれを理解しました。ここには、JSFiddleの解決策があります。

    <div class="container"> 
        <div class="row-fluid"> 
        <div class="col-xs-12 col-sm-12 col-md-3 col-md-push-9 bg-warning"> 
         column 3 
        </div> 
        <div class="col-xs-12 col-sm-12 col-md-5 col-md-pull-3 col-lg-push-1 bg-danger"> 
         Column 2 
        </div> 
        <div class="col-xs-12 col-sm-12 col-md-4 col-md-pull-3 col-lg-pull-8 bg-success">Column 1 
        </div> 
        </div> 
    </div> 
    
    関連する問題