JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row grid-container">
<div class="col-md-12">
<div class="row">
<div class="col-md-5">
<div class="row img-container img-featured">
<div class="col-md-12">
<a href="/posts/1"><img class="img-responsive img-thumbnail" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a>
</div>
</div>
</div>
<div class="col-md-7">
<div class="row">
<div class="img-container">
<div class="col-md-4 img-sub">
<a href="/posts/1"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a>
</div>
<div class="col-md-4 img-sub">
<a href="/posts/1"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a>
</div>
<div class="col-md-4 img-sub">
<a href="/posts/1"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a>
</div>
</div>
</div>
<div class="row">
<div class="img-container">
<div class="col-md-4 img-sub">
<a href="/posts/1"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a>
</div>
<div class="col-md-4 img-sub">
<a href="/posts/1"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a>
</div>
<div class="col-md-4 img-sub">
<a href="/posts/1"><img class="" src="https://i.ytimg.com/vi/JPA_rzHDy6o/maxresdefault.jpg" /></a>
</div>
</div>
</div>
</div>
</div>
</div>
...
CSS
.img-sub {
height: 150px;
overflow: hidden;
}
.img-sub img {
height: 100%;
position: absolute;
margin: 0 auto;
left: -100%;
right: -100%;
width: auto;
clip:rect(0, 220px, 150px, 50px);
}