Bootstrap 3 Image gallery with varying heights

This is a simple Bootstrap 3 image gallery with varying image heights to demonstrate how to clear floats using the clearfix helper and visibility utility classes.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="thumbnail">
          <img src="https://unsplash.it/200/300" />
      </div>
    </div>
    <div class="col-xs-12">
      <div class="thumbnail">
          <img src="https://unsplash.it/200/290" />
      </div>
    </div>
    <div class="clearfix visible-sm-block"></div>
    <div class="col-xs-12">
      <div class="thumbnail">
          <img src="https://unsplash.it/200/280" />
      </div>
    </div>
    <div class="clearfix visible-md-block"></div>
    <div class="col-xs-12">
      <div class="thumbnail">
          <img src="https://unsplash.it/200/350" />
      </div>
    </div>
    <div class="clearfix visible-sm-block visible-lg-block"></div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="thumbnail">
          <img src="https://unsplash.it/200/370" />
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="thumbnail">
          <img src="https://unsplash.it/200/240" />
      </div>
    </div>
    <div class="clearfix visible-sm-block visible-md-block"></div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="thumbnail">
          <img src="https://unsplash.it/200/510" />
      </div>
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="thumbnail">
          <img src="https://unsplash.it/200/200" />
      </div>
    </div>
    <div class="clearfix visible-sm-block visible-lg-block"></div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="thumbnail">
          <img src="https://unsplash.it/200/325" />
      </div>
    </div>
    <div class="clearfix visible-md-block"></div>
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="thumbnail">
          <img src="https://unsplash.it/200/415" />
      </div>
   ...

CSS

@import url('');