Stack Layout anders auf mobilen Geräten

Question

Ich habe versucht, drei Divs unterschiedlich auf Desktop, Handy und Tablet zu stapeln, ohne die Divs duplizieren zu müssen. Es sollte so aussehen

Ist dies mit reinem CSS möglich? Eine JavaScript-Antwort ist in Ordnung, wenn es keine Möglichkeit gibt, dies mit CSS allein zu tun. Hier ist eine Geige 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> 

Vielen Dank im Voraus!

Answer 1

Wenn Sie denken, "mobile first", wie diese col-*-push/col-*-pull Klassen verwenden ..

<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