Flexbox wrapping issues

Question

Afternoon Everyone,

I'm new to using flex and I'm running into an issue with wrapping and was looking for some help. I'm currently trying to create a grid area like the windows 10 start menu but when I introduce a large item item in the grid it throws the wrapping off and I cant seem to figure out how to get them to sync. below is a link to my codepen so you can see my testing code.

I'm trying to get the 9th object under the 8th object. Now please let me know if I'm using flex wrong. Like I said I'm new to it and I have been reading different articles on how to use it.

http://codepen.io/zacharyshupp/pen/KgWkVa

   <div style="width:306px;height:700px;margin:50px;">
      <ul class="flex-container">
        <li class="flex-item">1</li>
        <li class="flex-item-wide">3</li>
        <li class="flex-item">4</li>
        <li class="flex-item">5</li>
        <li class="flex-item">6</li>
        <li class="flex-item-wide_tall">7</li>
        <li class="flex-item">8</li>
        <li class="flex-item">9</li>
        <li class="flex-item">10</li>
        <li class="flex-item">11</li>
        <li class="flex-item">12</li>
      </ul>
    </div>



  .flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    background-color:gray;
  }

  .flex-item {
    background: tomato;
    padding: 5px;
    width: 100px;
    height: 100px;
    margin: 1px;
    line-height: 100px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
  }

  .flex-item-wide {
    background: tomato;
    padding: 5px;
    width: 202px;
    height: 100px;
    margin: 1px;
    line-height: 100px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
  }

  .flex-item-wide_tall {
    background: tomato;
    padding: 5px;
    width: 202px;
    height: 200px;
    margin: 1px;
    line-height: 200px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
  }