Переупорядочить div с помощью CSS

Question

Я хотел бы переупорядочить некоторые div, используя только CSS, если это возможно. Вот 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 позволяет мне изменять порядок блока одного и того же уровня.

Я бы очень хотел, чтобы у меня было решение, которое не использует JavaScript для повторной записи DOM (если взять subblock3 и поместить его в другое место, чтобы угодить моему CSS), если это возможно.

Answer 1

Это это невозможно и javascript - это не вариант для моей проблемы.

Вот пример кода, который я использовал (требуется jQuery).

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