Индивидуальный заказ позиции элемента Flex Box

Question

У меня есть гибкие коробки 11111, 22222 и 33333, которые обертывают.

Они обертываются так:

         3333333
222222222222 
11111

но мне нужно, чтобы они завернулись вот так

11111  33333333
222222222222

Ниже приведен код, и вот ссылка на кодовый блок: https://codepen.io/anon/pen/oRrzzQ

.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  text-align: center;
}

.content2 div {
  height: 50%;
  width: 300px;
}
.red {
  background: orangered;
  margin-right: auto;
}
.green {
  background: yellowgreen;
  margin-right: auto;
}
.blue {
  background: steelblue;
  margin-left: auto;
}


.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between;
}

<div class="content2">
    <div class="red">1</div>
  <div class="green" style="width:60%">2</div>
  <div class="blue">3</div>
</div>

Answer 1

Скорректировано с использованием вашего кода.

.content2 {
  color: #fff;
  font: 100 24px/100px sans-serif;
  height: 150px;
  text-align: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.content2 div {
  height: 50%;
}

.red {
  width: 40%;
  background: orangered;
  margin-right: auto;
}
.green {
  width: 60%;
  background: yellowgreen;
  margin-right: auto;
}

.blue {
  width: 100%;
  background: steelblue;
  margin-left: auto;
}


.content2 {
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: space-between ;
}

Answer 2

Вы можете легко достичь этого с помощью display: grid, но для вашей цели в flex я добавил некоторые изменения в ваш код

.content2 {
    color: #fff;
    font: 100 24px/100px sans-serif;
    height: 150px;
    text-align: center;
  display: flex;
flex-direction: column;
  flex-wrap: wrap;
}

.content2 div {
    height: 50%;
  width: 50%;
}
.red {
    background: orangered;
}
.green {
    background: yellowgreen;
}
.blue {
    background: steelblue;
}

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap -->


<div class="content2">
    <div class="red">1</div>
  <div class="green">2</div>
  <div class="blue">3</div>
</div>