如何重新排列12个自举列宽度的div的顺序？

Question

我有两个div在一个在另一个之上。

当窗口宽度低于992像素时，我希望b高于a，所以我想垂直重新排列它们。

我试图用bootstrap做到这一点。结果如下：

为什么？

HTML：

<div class="parent">
  <div class="row">
    <div class="a col-xs-12 col-xs-offset-12 col-sm-offset-12 col-md-offset-0">
      a
    </div>
    <div class="b col-xs-12">
      b
    </div>
  </div>
</div>

的CSS：

.parent
{
  width: 100px;
}

.a
{
  background: #faa;  
}
.b
{
  background: #afa;  
}

https://jsfiddle.net/24tt6xgL/5/

我尝试过的其他事情：

• 推动a-div 12并用col-md-push-12和col-md-pull-12拉动b-div 12列。
• 只推动a-div，而不是拉动b-div。
• 推动a-div 6列，拉动b-div 6列

Answer 1

对此的一个解决方案是使用像hidden- *这样的类。通过这种方式，您将拥有重复的代码，但它会很快实现您想要做的并保持在Bootstrap中。

<div class="parent">
  <div class="row">
    <div class="b col-xs-12 visible-xs visible-sm">
      b
    </div>
    <div class="a col-xs-12">
      a
    </div>
    <div class="b col-xs-12 hidden-xs hidden-sm">
      b
    </div>
  </div>
</div>

正如你在这里看到的那样，.b div已被复制，但从未出现过两次：对于md和lg屏幕，顶部.b div将被隐藏，底部将显示。对于xs和sm屏幕，情况恰恰相反。

当然，这个解决方案并不完美，代码的维护更省力，所以如果这些div比示例代码长得多，那么可能值得尝试使用CSS，但是如果代码很短，这将是一个很好的解决方案。

还值得注意的是，在.b div之上和之下复制.a div是一种等效的解决方案。