Using the flex order property across multiple containers

Question

If I have the following HTML markup:

<div class="wrapper">
  <div id="container-1">
    <div class="child-1-1"></div>
    <div class="child-1-2"></div>
  </div>
  <div id="container-2">
    <div class="child-2-1"></div>
    <div class="child-2-2"></div>
  </div>
</div>

I can apply a display of flex to wrapper, and then make container-2 appear above container-1 using order.

I would like the final order of the elements to be:

child-2-1
child-1-1
child-1-2
child-2-2

What I basically want is for the children of the two containers to pretend as if their parents are not there, and instead take their ordering from the outer wrapper.

This could of course be achieved via either duplicating the components and hiding/showing depending on the breakpoint, or via JS - so no points for suggesting those.

What are you trying to do? can you just have a wrapper that wraps child-2-2 and child-1-1 ? — Charlie Ng, Jul 20 '17 at 22:26
A diagram of your desired layout would be helpful, by setting `order: -1` on` #container-2` (and a `flex-flow: column` on `.wrapper`, child-2-2 does appear above child-1-1. Where should child-2-1 appear in your desired circumstance? — Adam Jenkins, Jul 20 '17 at 22:27
I'm talking theoretically, but as a real-world example imagine container-1 and container-2 are left and right columns in desktop mode, but in mobile mode they appear stacked. However, as that pushes the contents of container-2 far down the page, I want to bring child-2-1 at the top. but retain the order of the rest of the elements. — Geat, Jul 20 '17 at 22:28
Consider getting rid of your inner containers and instead using `flex-basis` (the third parameter of `flex`) and `order` to position the children where you want at various breakpoints. You definitely **cannot**, using just flexbox and the markup you have provided, achieve your desired result. Can't do it, full stop. — Adam Jenkins, Jul 20 '17 at 22:33

Michael Benjamin · Accepted Answer · 2017-07-20T22:58:46.497

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

So using order to re-arrange a series of flex items spread across different containers will not work.

But based on your requirements, it doesn't appear you need multiple containers. All items can exist in a single container.

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.child-1-1 { order: 1; }
.child-1-2 { order: 3; }
.child-2-1 { order: 2; }
.child-2-2 { order: 4; }

.wrapper > div {
  flex: 1 0 40%;
  height: 50px;
  margin: 5px;
  border: 1px solid #ccc;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}


@media ( max-width: 600px) {
  .wrapper {
    flex-direction: column;
  }
  div.child-2-1 {
    order: -1;
    background-color: orange;
  }
}

<div class="wrapper">
  <div class="child-1-1">child-1-1</div>
  <div class="child-1-2">child-1-2</div>
  <div class="child-2-1">child-2-1</div>
  <div class="child-2-2">child-2-2</div>
</div>

jsFiddle

Learn more about the flex order property here:

Using the flex order property across multiple containers

1 Answers1

jsFiddle

Linked