Custom grid using bootstrap 3 grid system?

<div class="container">
    <div class="row no-gutter">
        <div class="col-xs-4 col-xs-offset-1">
            <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/600"></a></div>
            <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
            <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
        </div>
        <div class="col-xs-4">
            <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
            <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
            <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/600x300"></a></div>
            <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
            <div class="col-xs-6"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
        </div>
        <div class="col-xs-2">
            <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
            <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
            <div class="col-xs-12"><a href="#" class="thumbnail"><img src="//placehold.it/300"></a></div>
        </div>
    </div>
</div><!-- /.container -->

.row.no-gutter [class*='col-'] {
  padding-right:0;
  padding-left:0;
}

.row.no-gutter .thumbnail {
  margin-bottom: 0;
  padding: 0;
  margin-right: 0;
  margin-left: 0;
}

.row.no-gutter .thumbnail>img {
  width: 100%;
}