0

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.

Benoît Latinier
  • 2,062
  • 2
  • 24
  • 36
  • 3
    There is no CSS solution for this, not even flexbox. – Paulie_D Jul 08 '16 at 15:41
  • Why do you need the 2 parent blocks? – Asons Jul 08 '16 at 15:42
  • You could fake it by adding space and manually positioning each block in the same media query where you were trying to change the order, but that's not going to produce dependable results. This would require JS to do right. – TylerH Jul 08 '16 at 15:42
  • @Paulie_D That's my fear, but I wanted to try my last resort before throwing some more JS into my app. – Benoît Latinier Jul 08 '16 at 15:42
  • @LGSon: HTML is provided by some external tool which injects the HTML into my page, I don't have hands on it unless I modify the lib. – Benoît Latinier Jul 08 '16 at 15:44
  • Have any of these blocks by any chance a fixed height/width? – Asons Jul 08 '16 at 15:46
  • The sub blocks could but I'd prefer not, and the block1 contains a textarea, so expandable etc… – Benoît Latinier Jul 08 '16 at 15:48
  • 1
    Ok, the good thing is, it is an easy and simple script which simply move the div in block 1 in between subblock 2 and 3 on load and will cause less to nothing on performance ... and if loaded using AJAX maybe even less. – Asons Jul 08 '16 at 18:00

1 Answers1

0

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");
Benoît Latinier
  • 2,062
  • 2
  • 24
  • 36