css - 使用 CSS 重新排序 div

Question

如果可能的话，我想只使用 CSS 重新排序一些 div。这是我要重新排序的 HTML 示例:

<div class="block1">
  Block1
</div>
<div class="block2">
    <div class="subblock1">S-Block1</div>
    <div class="subblock2">S-Block2</div>
    <div class="subblock3">S-Block3</div>
</div>

这是我想要的图形结果:

S-Block1
S-Block2
Block1
S-Block3

我已经尝试使用 display: flex; 和 order: X 但没有成功。主要问题在于我想在 block1 之前和之后拆分 block2。 flex 显示只允许我更改相同“级别”的 block 的顺序。

如果可能的话，我真的很想有一个不使用 JavaScript 重写 DOM 的解决方案(通过采用 subblock3 并将其放在其他地方来取悦我的 CSS)。

Answer 1

看起来这是不可能的，javascript 不是我的问题的选项。

这是我使用的示例代码(需要 jQuery)。

$(".subblock2").prependTo(".form-wrapper");
$(".subblock1").prependTo(".form-wrapper");