ブートストラップリオーダーは

Question

私はこのスニペットをブラウザで開いて

<div class="container"> 
    <div class="row"> 
     <div id="left" class="col-xs-5 col-sm-5"> 
      How are you? 
     </div> 
     <div id="right" class="col-xs-7 col-sm-7"> 
      Thanks, I'm fine. 
     </div> 
    </div> 
</div> 

の場合を持って考えると、それは

How are you? Thanks, I'm fine. 

を表示する必要がありますし、右側に新しい行を破る左へ右と左から右へ768pxより上記のスニペットを得たい

Thanks, I'm fine. 
How are you? 

私は次のjavascriptを使用して、いつviewpoブラウザの幅は< = 767です。

/* 
    @Leo 
    Obtained from: 
    http://stackoverflow.com/questions/1766861/find-the-exact-height-and-width-of-the-viewport-in-a-cross-browser-way-no-proto 
*/ 

var getviewport = function(){ 

    var viewPortWidth; 
    var viewPortHeight; 

    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 
    if (typeof window.innerWidth != 'undefined') { 
     viewPortWidth = window.innerWidth, 
     viewPortHeight = window.innerHeight 
    } 

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
    else if (typeof document.documentElement != 'undefined' 
    && typeof document.documentElement.clientWidth != 
    'undefined' && document.documentElement.clientWidth != 0) { 
     viewPortWidth = document.documentElement.clientWidth, 
     viewPortHeight = document.documentElement.clientHeight 
    } 

    // older versions of IE 
    else { 
     viewPortWidth = document.getElementsByTagName('body')[0].clientWidth, 
     viewPortHeight = document.getElementsByTagName('body')[0].clientHeight 
    } 
    return [viewPortWidth, viewPortHeight]; 
}; 

var adjust = function(){ 
    var width = getviewport()[0]; 

    if(width<=767){ 
     $("#left").addClass("col-xs-push-7"); 
     $("#right").addClass("col-xs-pull-5"); 
    } 
    else{ 
     $("#left").removeClass("col-xs-push-7"); 
     $("#right").removeClass("col-xs-pull-5");  } 
}; 
adjust(); 
$(window).resize(adjust); 

したがって、ビューポートの幅が< = 767のとき。私は、「どのようにしている。おかげで、私は大丈夫だよ？」私は上記の順序付けを達成することができました*対応XS-プッシュ*およびxs-プルを追加することによって計算書に

"How are you? Thanks, I'm fine." to "Thanks, I'm fine. How are you? 

を注文してみてください

はしかし、私は何かがさらに誰かが助けを提供することができれば、私は喜んでいるでしょう

Thanks, I'm fine. 
How are you? 

に声明を破るために行うことができます感じています。

Answer 1

私があなたの質問を正しく理解していれば、実際にブートストラップでこれを行うことができます.JSは必要ありません！

768pxのブレークポイントより下の様にスタイルを設定するには、col-xs-を使用してください。 768を超えるようにスタイルを設定するには、col-sm-を使用します。スタックされた列の順番を入れ替えることはできませんが（常にマークアップと同じ順序で表示される順序です）、を押してとをプルをプルすると、768ブレークポイントより上の順序を変更できます。マークアップで

1. 、
2. 積み重ねられたとき、あなたのxsクラスを追加するには、列あなたがそれらを表示する方法を注文する - 私はあなたが望むものを理解していないが、私は.col-xs-10.col-xs-offset-1
3. があなたを追加だと思います"より大きい - xs"クラス。だから、.col-sm-5と.col-sm-7、.col-sm-offset-0でオフセットを除去した後、一つの列を押し、他の

を引いて、順番を入れ替えるここで作業抜粋です。 768以上でどのように動作するかを見るにはフル・ウインドウを表示してください。

（ブートストラップ sm以上）ワイド

： （ブートストラップxs）狭い

：

（ピンク面積がちょうど重なった列であることを示すことである結果は次のようになります。中心col-10）

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'; 
 

 
/* all of this just for demo purposes */ 
 
body { 
 
    margin: 10px; 
 
} 
 
.container { 
 
    background: rgba(255,0,0,.4); 
 
} 
 
.row div { 
 
    border: 1px solid #000; 
 
    background: #fff; 
 
    height: 40px; 
 
} 
 
.row div:first-child { 
 
    background: #000; 
 
    color: #fff; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-10 col-xs-offset-1 col-sm-5 col-sm-push-7 col-sm-offset-0"></div> 
 
    <div class="col-xs-10 col-xs-offset-1 col-sm-7 col-sm-pull-5 col-sm-offset-0"></div> 
 
    </div> 
 
</div>