JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.angularjs.org/1.0.3/angular.js"></script>
<script src="http://angular-ui.github.com/angular-ui/build/angular-ui.js"></script>
<script src="https://raw.github.com/desandro/isotope/master/jquery.isotope.min.js"></script>
<section>
<article>
<h2>two</h2>
</article>
<article>
<h2>three</h2>
</article>
<article>
<h2>one</h2>
</article>
</section>
CSS
body { padding: 8px 20%; }
section {
margin: 0 auto; padding: 8px 0 0 8px;
border: 1px solid #ddd; }
section article {
margin: 0 8px 8px 0; padding: 4px;
border: 1px solid #ddd; }
JavaScript
$('section').isotope({
itemSelector: 'article',
layoutMode: 'fitRows',
getSortData: {
title: function ($e) {
return $e.find('h2').text();
}
},
sortBy: 'title',
sortAscending: true
});