Question: Column ordering with colums of different heights

Hi,

I am trying to build a responsive thumbnail page using bootstrap 3. The problem I have is that I want to add in thumbnails twice the height of the other thumbnails into the flow. So what happens is This. But what I want is this instead (note: the ordering of the small pics filling the open space is not really of concern).

I think I would get it to work using some nesting div's, but this would require that the backend spitting out the code knows the off-sized pics and builds the code accordingly. (If the page was static I would absolutely do that). But I dont think that is possible with the backend code.

I favour a CSS solution instead. But I can't get it to work. A last resort would be to hack something in JS....

I would really appreciate if someone has an idea. I am sure I am just missing a little thing.

Code for reference:

<div class="container projects">
      <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="design2.html">
               <img src="http://placehold.it/200x125/00ff00/" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125/ff0000" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125/00ff00" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125/0000ff" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125/0000ff" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125/00ff00" class="img-responsive">
          </a>
      </div>
      <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125" class="img-responsive">
          </a>
      </div>


      <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125/ff0000" class="img-responsive">
          </a>
      </div>

                  <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x255/0000ff" class="img-responsive">
          </a>
      </div>
      <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125" class="img-responsive">
          </a>
      </div>

      <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125/00ff00" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125/ff0000" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125/0000ff" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125" class="img-responsive">
          </a>
      </div>
       <div class="col-lg-2 col-sm-3 col-xs-6 project">
          <a class="projectlink" href="#">
               <img src="http://placehold.it/200x125" class="img-responsive">
          </a>
      </div>         
....
</div>

CSS:

.project{
    	padding: 2px;
}