モバイルデバイス上でスタックレイアウトが異なる

Question

私は3つのdivをデスクトップ、モバイル、タブレットに基づいて別々にスタックしようとしていますが、divを複製する必要はありません。 これは次のようになります

これは純粋なCSSで可能ですか？ cssだけでこれを行う方法がない場合は、javascriptの回答は問題ありません。ここ はフィドルは、事前に https://jsfiddle.net/DTcHh/19086/

<div class="row"> 
    <div class="col-lg-2 col-sm-4 col-xs-12 sidebar-block"> 
    <div class="block" style="background-color:red;"></div> 
    </div> 
<div class="col-lg-6 col-sm-8 col-xs-12 "> 
    <div class="block" style="background-color:blue;"></div> 
</div> 
<div class="col-lg-4 col-sm-4 col-xs-12"> 
    <div class="block" style="background-color:yellow;"></div> 
</div> 
</div> 

感謝です！

Answer 1

あなたは "モバイル第一" と思うなら、あなたはすでにそれをやったように見えます...私は混乱しています。このようなcol-*-push/col-*-pullクラス..

<div class="row"> 
     <div class="col-lg-6 col-lg-push-2 col-sm-8 col-sm-push-4 col-xs-12 "> 
      <div class="block" style="background-color:blue;"></div> 
     </div> 
     <div class="col-lg-2 col-lg-pull-6 col-sm-4 col-sm-pull-8 col-xs-12 sidebar-block"> 
      <div class="block" style="background-color:red;"></div> 
     </div>  
     <div class="col-lg-4 col-sm-4 col-xs-12"> 
      <div class="block" style="background-color:yellow;"></div> 
     </div> 
</div> 

http://www.codeply.com/go/N8wCdrlkK3