Flexbox布局，其中较短的项目相互包裹？

Question

是否可以将此布局设置为唯一标记是单个容器中的项目？我假设需要flexbox。

<div class="cont">
  <div class="item item-1">1</div>
  <div class="item item-2">2 <br> wrap</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
</div>

.cont {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid grey;
  width: 200px;
  margin: auto;
}

.item-1 {
  background: blue;
  order: 1;
}

.item-2 {
  background: green;
  order: 2;
}

.item-3 {
  background: yellow;
  order: 3;
}

.item-4 {
  background: teal;
  order: 4;
}

.item-5 {
  background: grey;
  order: 5;
}

.item-6 {
  background: orange;
  order: 6;
}

.item-7 {
  background: gold;
  order: 7;
}

.item-1,
.item-2,
.item-3 {
  width: 50%;
}

.item-4,
.item-5,
.item-6,
.item-7 {
  width: 25%;
}

http://codepen.io/anon/pen/NAvXrz