使用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，但没有成功。主要问题在于我想在block2之前和之后拆分block1。 flex显示只允许我更改相同＆＃34;级别＆＃34;的块顺序。

我真的希望有一个解决方案，如果可能的话，不要使用JavaScript重新编写DOM（通过将subblock3放在别处以取悦我的CSS）。

Answer 1

显示这是不可能的而 javascript不是我的问题的选项。

以下是我使用的示例代码（需要jQuery）。

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