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">
<input type="hidden" value="asc" id="sort">
<div class="row">
<div id="id" class="small-4 columns click">
ID
</div>
<div id="cidade" class="small-4 columns click">
Cidade
</div>
<div id="cidade2" class="small-4 columns click">
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 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 class="row">
<div class="small-4 columns id">
5
</div>
<div class="small-4 columns cidade">
Arapongas
</div>
<div class="small-4 columns cidade2">
São Paulo
</div>
</div>
</div>
JavaScript
$(".click").click(function(){
var classe = $(this).attr('id');
var mylist = $('#container');
var listitems = mylist.children('.row').get();
listitems.sort(function(a, b) {
var compA = $(a).find('.'+classe).text().toUpperCase();
var compB = $(b).find('.'+classe).text().toUpperCase();
if($("#sort").val()=='asc'){
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
} else {
return (compA > compB) ? -1 : (compA < compB) ? 1 : 0;
}
})
if($("#sort").val()=='asc'){
$('#sort').val('desc');
} else {
$('#sort').val('asc');
}
$.each(listitems, function(idx, itm) {
mylist.append(itm);
});
});