Ordering flex items

Answer 1

You shouldn't use Flexbox for this because it's not designed for it. Consider using CSS Grid instead. Using grid-template-areas, assigning the children where we want them in the layout becomes a trivial task. The DOM order of the grid children becomes irrelevant.

.grid-container {
  display: inline-grid;
  grid-template-areas: "two one"
                       "two three";
}

.grid-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

.one {
  grid-area: one;
}

.two {
  grid-area: two;
}

.three {
  grid-area: three;
}

  
1
  
2
  
3