Benoît Latinier Benoît Latinier - 4 months ago 9
CSS Question

Re-ordering div using CSS

I would like to re-order some div using only CSS if possible.
Here is the HTML sample I want to re-order:

<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>


And this is the graphical result I want:

S-Block1
S-Block2
Block1
S-Block3


I already tried playing with
display: flex;
and
order: X
but with no success. The main problem lays in the fact that I want to split the
block2
before and after the
block1
. The
flex
display only allow me to change order of block of the same "level".

I would really like to have a solution that doesn't not use JavaScript to re-write the DOM (by taking subblock3 and putting it elsewhere to please my CSS) if possible.

Answer

It appears this is not possible and javascript is not an option for my problem.

Here is the sample code I used (jQuery needed).

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