<div class="container-fluid">
	<div class="grid-uploads">
	
		<div class="well clearfix">

			<div class="btn-group filters-button-group">
				<button type="button" class="btn btn-default" data-filter="*">Show All</button>
				<button type="button" class="btn btn-default" data-filter=".html">.HTML</button>
				<button type="button" class="btn btn-default" data-filter=".jpg">.JPG</button>
				<button type="button" class="btn btn-default" data-filter=".mp3">.MP3</button>
				<button type="button" class="btn btn-default" data-filter=".png">.PNG</button>
			</div><!-- /.btn-group -->

			<div class="btn-group sort-button-group pull-right"> 
				<button class="btn btn-default" data-sort-direction="asc" data-sort-value="original-order" type="button">Sort <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button> 
				<button class="btn btn-default" data-sort-direction="asc" data-sort-value="fileby" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button> 
				<button class="btn btn-default" data-sort-direction="asc" data-sort-value="filesize" type="button">File Size  <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
				<button class="btn btn-default" data-sort-direction="asc" data-sort-value="filedate" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button> 
				<button class="btn btn-default" data-sort-direction="asc" data-sort-value="filename" type="button">File Name  <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button> 
			</div><!-- /.btn-group -->

		</div><!-- /.well -->
	
		<div class="uploads-row row">

			<div class="col-media col-xs-6 col-sm-4 col-md-3 col-lg-2 mp3" data-filesize="2587760" data-ticks="636335572495870000">
				<div class="thumbnail">

					<div class="col-media-item col-media-icon">
						<span class="glyphicon glyphicon-file"></span>
					</div><!-- /.col-media-item -->

					<div class="caption col-media-details">
						<p>
							<span class="label label-default pull-right"> <span class="file-size"> 2.5MB </span> - mp3 </span> 
							<span class="file-by"> Carroll Wike</span> <br /> 
							<small class="file-date"> 6/20/2017 </small>
						</p>
						<div><small class="file-name"> onehour-mp3 </small></div>
					</div><!-- /.caption -->

				</div><!-- /.thumbnail -->
			</div><!-- /.col -->

			<div class="col-media col-xs-6 col-sm-4 col-md-3 col-lg-2 jpg" data-filesize="225940" data-ticks="636334710921070000">
				<div class="thumbnail">

					<div class="col-media-item col-media-icon">
						<span class="glyphicon glyphicon-file"></span>
					</div><!-- /.col-media-item -->

					<div class="caption col-media-details">
						<p> 
							<span class="label label-default pull-right"> <span class="file-size"> 220.6KB </span> - jpg </span> 
							<span class="file-by"> Rodger Brundige </span> <br> 
							<small class="file-date"> 6/19/2017 </small>
						</p>
						<div><small class="file-name"> ecp-page-jpg </small></div>
					</div><!-- /.caption -->

				</div><!-- /.thumbnail -->
			</div><!-- /.col -->

			<div class="col-media col-xs-6 col-sm-4 col-md-3 col-lg-2 jpg" data-filesize="1013621" data-ticks="636332169180770000">
				<div class="thumbnail">

					<div class="col-media-item col-media-icon">
						<span class="glyphicon glyphicon-file"></span>
					</div><!-- /.col-media-item -->

					<div class="caption col-media-details">
						<p>
							<span class="label label-default pull-right"> <span class="file-size"> 989.9KB </span> - jpg </span>
							<span class="file-by"> Melaine Shurtleff </span> <br> 
							<small class="file-date"> 6/16/2017 </small> 
						</p>
						<div> <small class="file-name"> desktop-computer-jpg </small> </div>
					</div><!-- /.caption -->

				</div><!-- /.thumbnail -->
			</div><!-- /.col -->

			<div class="col-media col-xs-6 col-sm-4 col-md-3 col-lg-2 png" data-filesize="8431" data-ticks="636332169170070000">
				<div class="thumbnail">

					<div class="col-media-item col-media-icon">
						<span class="glyphicon glyphicon-file"></span>
					</div><!-- /.col-media-item -->

					<div class="caption col-media-details">
						<p> 
							<span class="label label-default pull-right"> <span class="file-size"> 8.2KB </span> - png </span>
							<span class="file-by"> Shawana Bowles </span> <br> 
							<small class="file-date"> 6/16/2017 </small>
						</p>
						<div> <small class="file-name"> caravan-png </small> </div>
					</div><!-- /.caption -->

				</div><!-- /.thumbnail -->
			</div><!-- /.col -->

			<div class="col-media col-xs-6 col-sm-4 col-md-3 col-lg-2 png" data-filesize="6274" data-ticks="636332169168700000">
				<div class="thumbnail">

					<div class="col-media-item col-media-icon">
						<span class="glyphicon glyphicon-file"></span>
					</div><!-- /.col-media-item -->

					<div class="caption col-media-details">
						<p> 
							<span class="label label-default pull-right"> <span class="file-size"> 6.1KB </span> - png </span> 
							<span class="file-by"> Prince Lineberry </span> <br> 
							<small class="file-date"> 6/16/2017 </small>
						</p>
						<div> <small class="file-name"> icon-phone-png </small> </div>
					</div><!-- /.caption -->

				</div><!-- /.thumbnail -->
			</div><!-- /.col -->

			<div class="col-media col-xs-6 col-sm-4 col-md-3 col-lg-2 jpg" data-filesize="1294930" data-ticks="636332155255900000">
				<div class="thumbnail">

					<div class="col-media-item col-media-icon">
						<span class="glyphicon glyphicon-file"></span>
					</div><!-- /.col-media-item -->

					<div class="caption col-media-details">
						<p>
							<span class="label label-default pull-right"> <span class="file-size"> 1.2MB </span> - jpg </span>
							<span class="file-by"> Salena Kesterson </span> <br> 
							<small class="file-date"> 6/16/2017 </small>
						</p>
						<div><small class="file-name"> zach-betten-jpg </small></div>
					</div><!-- /.caption -->

				</div><!-- /.thumbnail -->
			</div><!-- /.col -->

		</div><!-- /.uploads-row -->
	</div><!-- /.grid-uploads -->
</div><!-- /.container -->
.thumbnail {
  border-color: #dde4e6;
}
.thumbnail.active,
.thumbnail:focus,
.thumbnail:hover {
  border-color: #337ab7;
}
.col-media-item {
  font-size: 40px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #ededed;
}
.col-media-details {
  line-height: 1;
}
  // init Isotope
  var $grid = $('.uploads-row').isotope({
    itemSelector: '.col-media',
    layoutMode: 'fitRows',
    getSortData: {
      fileby:   '.file-by',
      filename: '.file-name',
      filedate: '[data-ticks]',
      filesize: function( itemElem ) {
        var filesize = $( itemElem ).attr('data-filesize');
        return parseInt( filesize );
      }
    }
  });

  // bind filter button click
  $('.filters-button-group').on('click', 'button', function () {
    var filterValue = $(this).attr('data-filter');
    $grid.isotope({ filter: filterValue });
  });

  // bind sort button click
  $('.sort-button-group').on( 'click', 'button', function() {

    /* Get the element name to sort */
    var sortValue = $(this).attr('data-sort-value');

    /* Get the sorting direction: asc||desc */
    var direction = $(this).attr('data-sort-direction');

    /* convert it to a boolean */
    var isAscending = (direction == 'asc');
    var newDirection = (isAscending) ? 'desc' : 'asc';

    /* pass it to isotope */
    $grid.isotope({ sortBy: sortValue, sortAscending: isAscending });

    $(this).attr('data-sort-direction', newDirection);

    var span = $(this).find('.glyphicon');
    span.toggleClass('glyphicon-chevron-up glyphicon-chevron-down');

  });

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
  3. https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js