重新排列html以进行响应式设计

Question

昨天我向html设计寻求帮助，我可以让浮动div正确。我得到了question的正确答案，谢谢你。现在我试图在响应式设计中使用相同的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种不同的响应大小，如下图所示：

我在codepen上发布了代码。您可以在中间移动devider以调整窗口大小，看看会发生什么。

就像我说的，在我看来我需要重新排列HTML。对于min-width: 757px，我认为我需要将box-1移到box-5后面。 对于max-width: 756px我还需要在box-3前面移动box-1。我怎么能这样做，不使用javascript？

Answer 1

我已尝试编辑您的代码，似乎可以正常工作

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

Answer 2

我希望你能用 flow-from和flow-into CSS规则来做到这一点。

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

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