Edit in JSFiddle

<div class="flexbox">
  <div class="flex-item flex-item__one">
    Flex Item 1
  </div>
  <div class="flex-item flex-item__two">
     Flex Item 2
  </div>
    <div class="flex-item flex-item__three">
    Flex Item 3
  </div>
  <div class="flex-item flex-item__four">
     Flex Item 4
  </div>
</div>

div {
  color: #fff;
}

.flexbox {
  display: flex;
  flex-direction: row;
  background: gray;
  flex-wrap: wrap;
}

.flex-item__one {
  background: red;
  flex-grow: unset;
}

.flex-item__two {
  background: blue; 
  flex-grow: 1;
}

.flex-item__three {
  background: skyblue;
  order: 4;
  flex-grow: 1;
}

.flex-item__four {
  background: violet;
  order: 5;
}

.flexbox:before {
  content: "";
  background: green;
  order: 3;
  flex-basis: 100%;
  height: 16px;
}