Creating a complex image and grid-based layout in twitter bootstrap - html

Question

This seems to be my 2nd question regarding Twitter Bootstrap Grid system - but I'm fumbled.
I'm trying to build an image gallery, where each slide has an interesting layout. The JavaScript part is no problem (yay jQuery!) - it is the CSS/HTML part I'm stuck with.
Here's what I got so far - jsfiddle
<div class="container" style="padding-top: 20px; position: relative; padding-bottom: 20%; height: 0; overflow: hidden">
<div class="flexslider" style="position: absolute; top: 0; left: 0; padding-top: 20px; padding-bottom: 20px; width: 100%; height: 100%">
<ul class="slides">
<li>
<!-- Slide #1 -->
<div class="row">
<div class="col-xs-offset-2 col-xs-3" style=""> <a href="#" class="thumbnail">
<img src="img/bg-blur/IMG_8446.jpg">
<div class="thumbtext"><h3>TEXT</h3></div>
</a>
</div>
<div class="col-xs-5">
<div class="row">
<div class="col-xs-4"> <a href="#" class="thumbnail">
<img src="img/bg-blur/IMG_8757.jpg">
<div class="thmbtxt">Description</div>
</a>
</div>
<div class="col-xs-4"> <a href="#" class="thumbnail">
<img src="img/bg-blur/IMG_8848.jpg">
<div class="thmbtxt">Description</div>
</a>
</div>
<div class="col-xs-4"> <a href="#" class="thumbnail">
<img src="img/bg-blur/IMG_8864k.jpg">
<div class="thmbtxt">Description</div>
</a>
</div>
<div class="col-xs-6"> <a href="#" class="thumbnail">
<img src="img/bg-blur/noga.jpg">
<div class="thmbtxt">Description</div>
</a>
</div>
<div class="col-xs-6"> <a href="#" class="thumbnail">
<img src="img/bg-blur/untitled-(1-of-11).jpg">
<div class="thmbtxt">Description</div>
</a>
</div>
</div>
</div>
<div class="col-xs-2"></div>
</div>
</li>
</ul>
</div>
</div>
If you notice, the left-most image takes up only 1 row. What I'm trying to do is automatically resize it (the block in which it is sitting in), so it takes up the entire height of the 2 rows. This way it would look neat and symetrical.
Any ideas or thoughts about this?