A Bootstrap thumbnail display case that reorders the images based on the size of the browser window.

thumbnail-display-case

<div class="row">
  <div class="col-xs-12 col-md-6 col-md-push-6">
    <a href="#" class="thumbnail">
      <img src="/image1" alt="alt1">
    </a>
        <div class="row">
          <div class="col-xs-4 col-md-6">
            <a href="#" class="thumbnail">
              <img src="image2" alt="alt2">
            </a>
          </div>
          <div class="col-xs-4 col-md-6">
            <a href="#" class="thumbnail">
              <img src="image3" alt="alt3">
            </a>
          </div>
          <div class="col-xs-4 visible-xs visible-sm">
            <a href="#" class="thumbnail">
              <img src="image4" alt="alt4">
            </a>
          </div>
        </div>
    </div>
  <div class="col-xs-6 col-md-6 col-md-pull-6 visible-md visible-lg">
    <a href="#" class="thumbnail">
      <img src="image4" alt="alt4">
    </a>
  </div>
</div>