Конфигурация стека по-разному на мобильных устройствах

Question

Я пытался складывать три div по-разному на основе настольных, мобильных и планшетов, не имея необходимости дублировать div. Это должно выглядеть так:

Возможно ли это с чистым css? Ответ на javascript будет прекрасным, если нет способа сделать это с помощью только css. Вот скрипку 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