flexbox order: I want box to open under a element which is not a sibling

Question

I want yellow to be under blue when screen size is small.

I know why it dont work now, since yellow is not a sibling to the other boxes, what can I do to fix this?

.container1 {
  display: flex;
  flex-flow: column;
}

.container2 {
  display: flex;
  flex-flow: row;
}

.box {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  margin: 5px 5px 5px 5px;
}

#b1 {
  background-color: red;
}

#b2 {
  background-color: blue;
}

#b3 {
  background-color: green;
}

#b4 {
  background-color: yellow;
}

@media screen and (max-width:500px) {
.container2 {
  display: flex;
  flex-flow: column;
}
  #b1 {
    order: 1;
    -webkit-order: 1;
  }

  #b2 {
    order: 2;
    -webkit-order: 2;
  }

  #b3 {
    order: 4;
    -webkit-order: 4;
  }

  #b4 {
    order: 3;
    -webkit-order: 3
  }
}

<div class="container1">
  <div class="container2">
    <div class="box" id="b1"></div>
    <div class="box" id="b2"></div>
    <div class="box" id="b3"></div>
  </div>
  <div class="box" id="b4"></div>
</div>

I need to add some more text to satisfy SO, I think I got all relevant info in my text above :)

@Paulie_D Idk if it was you that posted the previous answer. But I did it that way, changed the postition of green and blue. It is good enough :) — mrfr, Aug 18 '17 at 12:18

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Using order will not work because order is in relation to the container not the DOM.

The CSS order property specifies the order used to lay out flex items in their flex container. Elements are laid out in the ascending order of the order value. Elements with the same order value are laid out in the order in which they appear in the source code.

^{MDN - "order"}

CSS Grid can do this though.

Codepen Demo

.container {
  padding: 5px;
  display: grid;
  width: 500px;
  margin: 1em auto;
  grid-auto-columns: 50px;
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

.box {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

#b1 {
  background-color: red;
  grid-column-start: 1;
  grid-column-end: 2;
}

#b2 {
  background-color: blue;
  grid-column-start: 2;
  grid-column-end: 3;
}

#b3 {
  background-color: green;
  grid-column-start: 3;
  grid-column-end: 4;
}

#b4 {
  background-color: yellow;
  grid-column-start: 1;
  grid-column-end: 2;
}

@media screen and (max-width: 500px) {
  #b1,
  #b2,
  #b3,
  #b4 {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  #b3 {
    grid-row-start: 4;
    grid-row-end: 5;
  }
  #b4 {
    grid-row-start: 3;
    grid-row-end: 4;
  }
}

<div class="container">
  <div class="box" id="b1"></div>
  <div class="box" id="b2"></div>
  <div class="box" id="b3"></div>
  <div class="box" id="b4"></div>
</div>

It might be possible in Flexbox but the necessary properties are not yet fully supported in all browsers. I think it's Firefox only as of the time of writing.

flexbox order: I want box to open under a element which is not a sibling

1 Answers1