Bootstrap 3. Война с тремя колонками?

Пожалуйста помогите разобраться с колонками, не могу сделать как на рисунке, битый час пробую, всё время средняя колонка, то больше то меньше остальных. Как сделать так, чтобы колонки с изображениями внутри располагались именно такой плиткой?
Изображение

<div class="container">
  <div class="row">
    <div class="left-col hidden-xs col-sm-4">
      <div class="thumbnail">
        <img src="images/Pic1.jpg" alt="...">
      </div>
      <div class="thumbnail">
        <img src="images/Pic2.jpg" alt="...">
      </div>
    </div>
    <div class="middle-col col-sm-4">
      <div class="thumbnail">
        <img src="images/Pic3.jpg" alt="...">
      </div>
      <div class="thumbnail">
        <img src="images/Pic4.jpg" alt="...">
      </div>
      <div class="thumbnail">
        <img src="images/Pic5.jpg" alt="...">
      </div>
    </div>
    <div class="right-col hidden-xs col-sm-4">
      <div class="thumbnail">
        <img src="images/Pic6.jpg" alt="...">
      </div>
      <div class="thumbnail">
        <img src="images/Pic7.jpg" alt="...">
      </div>
    </div>
  </div>
</div>