livinzlife livinzlife - 1 month ago 6x
CSS Question

Applying order property to flex items in different containers

If I have existing html like:

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

Is it possible to order those 1,2,3 as if the
div doesn't exist?

I tried:

.flex{display:flex;flex-direction: column;}

But since they aren't originally of the same parent/child nesting level (or even child container), this doesn't work.


With your current HTML structure, that is not possible.

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

(And keep in mind that .row isn't even a flex container. So the children are not flex items.)

You can use order to re-arrange .row and .flex-item-2.

If you apply display: flex or inline-flex to .row, you can then use order to re-arrange .flex-item-1 and .flex-item-3.

But because they have different parents, the first two cannot be re-arranged with the latter two.