重新安排html以响应设计

Question

昨天，我请求帮助设计一个html，在那里我可以得到浮动div的权利。我在那个问题上得到了正确的答案，谢谢你。现在，我试图在响应性设计中使用相同的HTML。我又一次被困住了。我需要改变HTML的顺序，使设计在不同的响应大小中工作。因此，我可能需要javascript，我不认为应该这样做。

我的基本HTML如下所示：

<div class="product">
  <div class="box box-1">box 1</div>
  <div class="box box-2">box 2</div>
  <div class="box box-3">box 3</div>
  <div class="box box-4">box 4</div>
  <div class="box box-5">box 5</div>
</div>

有3种不同的响应大小，如下图所示：

​

我在码页上发布了代码。你可以移动中间的偏离者来调整窗口的大小，看看会发生什么。

就像我说的，我认为我需要重新排列HTML。对于min-width: 757px，我认为我需要将div box-1移到box-5后面。对于max-width: 756px，我还需要在box-1前面移动box-3。在不使用javascript的情况下，我应该怎么做呢？

Answer 1

我尝试过编辑您的代码，它似乎很有效。

http://codepen.io/anon/pen/ufiso

Answer 2

我希望您可以使用流-从和流到 CSS规则。

我希望这是你的解决方案，如果你不能，试着用jQuery。

w3c信息：http://dev.w3.org/csswg/css-regions-1/#regions