Flexbox - Fluid grid based on height of a particular column

Question

I am learning Flexbox and I am hoping to use it for an issue that I am having.

Basically, I have 3 columns and multiple rows. They have a the same size, apart from the last column in the first row placement. This is dynamic and although the width won't change, the height will change.

THE PROBLEM:

When the placement div is the same height, I want all of the columns to wrap around it. So basically the row will have 3 columns. However, when the height of the placement div is different, then all of the of the columns on the next rows will not wrap and therefore there will only be 2 columns per row.

WHAT I HAVE TRIED:

I have tried changing the height of the placement div in a hope that flexbox will re-order the other columns.

I have tried to use flex-grow but this does not work either.

.container {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 2000px;
  justify-content: center;
}

.tiles {
  border: 1px solid black;
  margin: 0 15px 30px 15px;
  flex: 0 0 220px;
  padding: 0;
  height: 220px;
}

.placement {
  border: 2px solid red;
   margin: 0 15px 30px 15px;
  flex: 0 0 220px;
  padding: 0;
  height: 500px;
}
.filler {
  border: 1px solid transparent;
  margin: 0 15px 0px 15px;
  flex: 0 0 220px;
  padding: 0;
  height: 0px;
  }

<div class="container">
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="placement"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
  <div class="tiles"></div>
</div>

Is this even possible to do in flexbox?

EDIT:

Please see: http://jsfiddle.net/nLqkrax5/9/

When the third div goes to this size, I want to make the grid fluid so that the other columns just wrap around this div instead of there being a huge white space around the div with the special height.