Using the order property for flex items in different containers

Question

If I have this html:

<div class="flex">
  <div class="row">
    <div class="flex-item-1">stuff</div> 
    <div class="flex-item-3">stuff</div> 
  </div>
  <div class="flex-item-2">stuff</div>
</div>

Is it possible to order these 1,2,3 as if the div rowdoes not exist?

I tried:

.flex { display:flex; flex-direction: column; }
.flex-item-1 { order: 1; }
.flex-item-2 { order: 2; }
.flex-item-3 { order: 3; }

But since they are not initially of the same parent / child level (or even a child container), this does not work.

Answer 1

With your current HTML structure this is not possible.

The property orderapplies only to flex items that are siblings in the same flex container.

(And keep in mind that .rowit is not a flex container, so children are not flexible elements.)

order .row .flex-item-2.

display: flex inline-flex .row, order .flex-item-1 .flex-item-3.

, .