html - 为响应式设计重新排列 html

Question

昨天我请求帮助进行 html 设计，我可以在其中获得正确的 float 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 上发布了代码。您可以移动中间的分隔符来调整窗口大小，看看会发生什么。

就像我说的，在我看来我需要重新排列 HTML。对于 min-width: 757px 我想我需要将 div box-1 移到 box-5 后面。对于 max-width: 756px，我还需要将 box-3 移到 box-1 前面。如果不使用 javascript，我应该怎么做？

Answer 1

我已经尝试编辑你的代码，它似乎有效

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