Flex item fall(float) after item in its row

Question

I'm trying to make the last element "float" after the first one, in a flex container.

Three items, each 50% width, displayed in .
Two elements per row.

Second(2) item is taller than the first.
Third item(3) doesn't fall right after the first one(1). It appears right after the height of the second item.
Is is possible to make the third element fall right after the first element? (Height of the second element should not influence the third element)

(I know it's possible to achieve this using: float.)

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

.flex-item {
  width    : 50%;
  height   : 150px;
}

.flex-parent .flex-item:first-child {
  background: green;
}
.flex-parent .flex-item:nth-child(2) {
  background  : orange;
  height      : 200px;
}
.flex-parent .flex-item:last-child {
  background: yellow;
}

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