JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.css">
<div class="row">
<div id="id" class="small-4 columns">
ID
</div>
<div id="cidade" class="small-4 columns">
Cidade
</div>
<div id="cidade2" class="small-4 columns">
Cidade
</div>
</div>
<div class="row">
<hr>
</div>
<div id="container">
<div class="row">
<div class="small-4 columns id">
2
</div>
<div class="small-4 columns cidade">
São Paulo
</div>
<div class="small-4 columns cidade2">
Curitiba
</div>
</div>
<div class="row">
<div class="small-4 columns id">
1
</div>
<div class="small-4 columns cidade">
Curitiba
</div>
<div class="small-4 columns cidade2">
São Paulo
</div>
</div>
<div class="row">
<div class="small-4 columns id">
3
</div>
<div class="small-4 columns cidade">
Curitiba
</div>
<div class="small-4 columns cidade2">
São Paulo
</div>
</div>
</div>
JavaScript
$("#id").click(function(){
var mylist = $('#container');
var listitems = mylist.children('div').get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) {
mylist.append(itm);
});
});
$("#cidade").click(function(){
var mylist = $('#container');
var listitems = mylist.children('div').get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) {
mylist.append(itm);
});
});
$("#cidade2").click(function(){
var mylist = $('#container');
var listitems = mylist.children('div').get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
$.each(listitems, function(idx, itm) {
mylist.append(itm);
});
});