ブートストラップは、小さな画面に複数の列を並び替えます。

Question

大丈夫ですので、私は多くの答えを読んだことがありますが、私はまだこれを動作させることができません。

私は4つの要素を容器の液体に入れています。

そして、これは彼らがモバイル上でどのように見えるかです：：これは、彼らがデスクトップ上でどのように見えるかです

私は小さな（モバイル）上の列の順序を変更する必要があります画面。 私は、これは結果である必要があります。

これが唯一の小さな画面上の順番でなければなりません。デスクトップ上では、画像1上のように行く必要があります：私はブートストラップのプッシュを試してみましたが、引きました

<div class="row" style="font-size: 150%;"> 
    <div class="col-lg-2 col-sm-12 bg-success"> 
    Marketing 

    </div> 
    <div class="col-lg-2 col-sm-12 bg-danger"> 
    Online chat 

    </div> 
    <div class="col-lg-6 col-sm-12 bg-primary"> 
    Main chat 

    </div> 
    <div class="col-lg-2 col-sm-12 bg-success"> 
    Marketing 2 

    </div> 
</div> 

が、私はそれを得ることができない：マーケティング、オンラインチャット、メインのチャットは、ここ2

を販売することはHTMLです私はどのようにしたいですか？私が試した：

<div class="row"> 
    <div class="col-lg-2 col-lg-push-6 bg-success"> 
    Reklama 1 

    </div> 
    <div class="col-lg-2 bg-danger"> 
    Online chat 

    </div> 
    <div class="col-lg-6 col-lg-pull-2 bg-primary"> 
    Main chat 

    </div> 
    <div class="col-lg-2 col-sm-12 bg-success"> 
    Reklama 2 

    </div> 
</div> 

Answer 1

私はあなたがXS画面サイズを言いたい小型（携帯電話）の画面上でのことを検討します。

それはあなたの問題を解決するための最良の方法だ場合、私は本当に知りませんが、異なるデバイスサイズで順序を変更するhidden-xsとvisible-xsを使用しようとすることができます。

<div class="container"> 
    <div class="row hidden-xs" style="font-size: 150%;"> 

     <div class="col-lg-2 col-sm-12 bg-success"> 
     Marketing    
     </div> 

     <div class="col-lg-2 col-sm-12 bg-danger"> 
     Online chat 
     </div> 

     <div class="col-lg-6 col-sm-12 bg-primary"> 
     Main chat    
     </div> 

     <div class="col-lg-2 col-sm-12 bg-success"> 
     Marketing 2  
     </div> 
    </div> 
    <div class="row visible-xs" style="font-size: 150%;"> 
     <div class="col-lg-6 col-sm-12 bg-primary"> 
     Main chat  
     </div> 

     <div class="col-sm-12 bg-success"> 
     Marketing 
     </div> 

     <div class="col-sm-12 bg-danger"> 
     Online chat 
     </div> 

     <div class="col-sm-12 bg-success"> 
     Marketing 2 
     </div> 
    </div> 
</div> 

は、だからと、「メインチャット」のdivがトップに表示されるテンプレートはXSデバイスに表示されます。

Answer 2

私はそれを考えて解決ベット方法

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="row"> 
 
     
 
    <div class="col-lg-2 col-sm-12 bg-success hidden-xs "> 
 
    Marketing 
 
    </div> 
 
    <div class="col-lg-6 col-sm-12 bg-primary visible-xs"> 
 
     Main chat  
 
    </div> 
 
    <div class="col-lg-2 col-sm-12 bg-danger hidden-xs"> 
 
    Online chat 
 

 
    </div> 
 
    <div class="col-sm-12 bg-success visible-xs"> 
 
     Marketing 
 
     </div> 
 
    <div class="col-lg-6 col-sm-12 bg-primary hidden-xs"> 
 
    Main chat 
 

 
    </div> 
 
    <div class="col-sm-12 bg-danger visible-xs"> 
 
     Online chat 
 
     </div> 
 
    <div class="col-lg-2 col-sm-12 bg-success hidden-xs"> 
 
    Marketing 2 
 

 
    </div> 
 
     <div class="col-sm-12 bg-success visible-xs"> 
 
     Marketing 2 
 
     </div> 
 
</div>