Grid layout with flexbox

Question

Is there any way to put the third flex-item right below the first flex-item ? It adjusts it's position depending on flex-item with the max width. How do i fix it ?

ul{
  display:flex;
  flex-wrap:wrap;
  list-style: none;
  border: 1px solid red;
  margin:0;
  padding:0;
}

li {
  background-color: lightblue;
  width: 50%;
  height: 100px;
  text-align:center;
}
.item2 {
  height:200px;
  background-color: yellow;
}

.item3 {
  background-color: magenta;
}

<ul class='flex-box'>
  <li class='item1'>1</li>
  <li class='item2'>2</li>
  <li class='item3'>3</li>
  <li class="item4">4</li>
</ul>