jQuery Image Sorting

Sortable

jQuery Flexbox Grid Sortable Images



<div class="container">
	<div class="row">
	    <div class="col-12">
		    <ul class="tab sort-source" color="primary" data-column-sorting="columns" data-plugin-options='{"layoutMasonry": "masonry": "*"}'>
				<li data-option-value="*" class="active"><a href="#">Show All</a></li>
				<li data-option-value="#light"><a href="#">Light</a></li>
				<li data-option-value="#primary"><a href="#">Primary</a></li>
				<li data-option-value="#gray"><a href="#">Gray</a></li>
				<li data-option-value="#dark"><a href="#">Dark</a></li>
			</ul>
			<div class="masonry-destination" data-column-sorting="columns">
			    <div id="dark" class="col-md-3 col-sm-6 masonry-column"><img class="img-responsive img-gallery" src="#" alt ="..."></div>
		        <div id="primary" class="col-md-3 col-sm-6 masonry-column"><img class="img-responsive img-gallery" src="#" alt ="..."></div>
		        <div id="gray" class="col-md-3 col-sm-6 masonry-column"><img class="img-responsive img-gallery" src="#" alt ="..."></div>
		        <div id="light" class="col-md-3 col-sm-6 masonry-column"><img class="img-responsive img-gallery" src="#" alt ="..."></div>
			</div>
	    </div>
	</div>
</div>