Bootstrap网格将图像调整到相同的高度

Question

我的问题是行/列的高度不合适。第一列有col-sm-8类，第二列有col-sm-4类

第二类col-sm-4有另外两行，每行都有col-sm-12类。

我已经找了一些类似jason插件的砌体，但我想留在CSS。我怎样才能解决这个问题并保持响应度？

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">	
<div class="row" style="padding-bottom:30px;">
		<div class="col-sm-8">
			<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/inteledison.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600"/>
		</div>
		<div class="col-sm-4">
			<div class="row">
				<div class="col-sm-12">
					<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/inteledison.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600"/>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/bare.jpg" class="img-responsive" style="border-radius: 4px; border:1px solid #ff6600" />
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-4">
			<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/esp8622.jpg" class="img-responsive"  style="border-radius: 4px; border:1px solid #ff6600" />
		</div>
		<div class="col-sm-4">
			<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/raspb2b.jpg" class="img-responsive"  style="border-radius: 4px; border:1px solid #ff6600" />
		</div>
		<div class="col-sm-4">
			<img src="http://xtc.he-webpack.de/templates/JTL-Shop3-Tiny/banners/beaglebone.jpg" class="img-responsive"  style="border-radius: 4px; border:1px solid #ff6600" />
		</div>
	</div>
</div>