移动设备上的堆叠布局不同

Question

我一直试图根据桌面，手机和平板电脑不同地堆叠三个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