<div class="container">
<ul class="row">
<li class="col-xs-6 col-sm-4 col-lg-3">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/1.png" alt="" class="img-responsive">
<figcaption>Enterdum et malesuada fames ac ante ipsum primis in faucibus.</figcaption>
</figure>
</li>
<li class="col-xs-6 col-sm-4 col-lg-3">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/2.png" alt="" class="img-responsive">
<figcaption>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</figcaption>
</figure>
</li>
<li class="clearfix visible-xs-block"></li>
<li class="col-xs-6 col-sm-4 col-lg-3">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/3.png" alt="" class="img-responsive">
<figcaption>Donec lectus urna, varius et rutrum quis, commodo sit amet diam.</figcaption>
</figure>
</li>
<li class="clearfix visible-sm-block visible-md-block"></li>
<li class="col-xs-6 col-sm-4 col-lg-3">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/4.png" alt="" class="img-responsive">
<figcaption>Fusce ac felis vel metus.</figcaption>
</figure>
</li>
<li class="clearfix visible-xs-block visible-lg-block"></li>
<li class="col-xs-6 col-sm-4 col-lg-3">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/5.png" alt="" class="img-responsive">
<figcaption>Phasellus blandit, eros ac aliquet sollicitudin.</figcaption>
</figure>
</li>
<li class="col-xs-6 col-sm-4 col-lg-3">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/6.png" alt="" class="img-responsive">
<figcaption>Cras et tincidunt nisi, ut semper ex. Ut iaculis eget urna sed auctor.</figcaption>
</figure>
</li>
<li class="clearfix visible-xs-block visible-sm-block visible-md-block"></li>
<li class="col-xs-6 col-sm-4 col-lg-3">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/7.png" alt="" class="img-responsive">
<figcaption>Nulla suscipit vestibulum dolor. Praesent tincidunt justo risus, ac aliquam purus scelerisque.</figcaption>
</figure>
</li>
<li class="col-xs-6 col-sm-4 col-lg-3">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/8.png" alt="" class="img-responsive">
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</figcaption>
</figure>
</li>
<li class="clearfix visible-xs-block visible-lg-block"></li>
<li class="col-xs-6 col-sm-4 col-lg-3">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/9.png" alt="" class="img-responsive">
<figcaption>Phasellus ornare rutrum fringilla.</figcaption>
</figure>
</li>
</ul>
</div>
body {
margin: 40px auto;
font: normal 14px/1.5 "Montserrat", "Helvetica Neue", sans-serif;
background: #cfd8dc;
color: #37474f;
}
figure {
background: whitesmoke;
margin: 0 0 40px;
box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
}
img {
width: 100%;
}
figcaption {
padding: 20px;
}
ul {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
This Pen doesn't use any external JavaScript resources.