javascript - 移动设备上的堆栈布局不同

Question

我一直在尝试根据台式机、移动设备和平板电脑以不同方式堆叠三个 div，而不必复制 div。它应该看起来像这样

纯 css 可以吗？如果没有办法单独使用 css，那么 javascript 答案就可以了。这是一个 fiddle 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