为响应式设计重新排序 div

Question

我正在研究响应式设计，我想在某些断点处重新排序一些 div。我不确定这是否可能，但它就在这里。

这是显示当前布局的粗略小提琴：http : //jsfiddle.net/Ubjmc/在某个断点上方。正如您所看到的（div 的）顺序是 - one，two然后是three.

这就是我希望它处理我的断点的方式：http : //jsfiddle.net/AfT4D/这个 div 的顺序是 - one，three然后是two。

我不确定这是否可以用直接的 css 来完成。到目前为止，我一直在做的是制作一个隐藏在断点上方并在断点之后显示的第四个元素，然后隐藏它在该断点处替换的元素（希望这是有道理的）。

这种方法是唯一可靠的纯 css 方法吗（这不是非常复杂）？

编辑- 我已经设置了断点并且正在使用媒体查询。我的示例中的第二个小提琴是我希望第一个的外观，按照第一个的顺序（或者我想知道这是否可能）。

<div class="wrap">
    <div class="one"></div>
     <div class="two"></div>
    <div class="three"></div>
</div>

问题是我的订单是否如上面的代码所示，是否有任何可能的方法让它看起来像这样：http : //jsfiddle.net/AfT4D/，而不编辑divs?

Answer 1

CSS 中已经有一个名为 order 的属性，并且可以在 Flex 显示中使用。

将容器设置为

.wrap {
    display: flex;
    flex-wrap: wrap;
}

然后你可以将 order 3 设置为 2

.two {
    order: 3;
}

就是这样！

演示

支持不是很高，但即将到来（Firefox 应该在本月发布 flex-wrap 支持）