onotole,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#list{
width:300px;
display:flex;
flex-flow:column wrap;
height:300px;
}
#list>div{
-webkit-animation:spin 5s ease-in-out infinite 2s;
animation:spin 5s ease-in-out infinite 2s;
width:33%;
height:19%;
border:1px #FF0033 solid;
text-align:center;
line-height:2em;
}
@keyframes spin{
50%{
width:50%;
height:12%;
}
100%{
width:33%;
height:19%;
}
}
@-webkit-keyframes spin{
50%{
width:50%;
height:12%;
}
100%{
width:33%;
height:19%;
}
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
var elems = document.querySelectorAll("#list > div");
var arr = $.makeArray(elems);
arr.sort(function(a, b) {
return $(a).data("count") - $(b).data("count")
});
$(arr).appendTo("#list");
});
</script>
</head>
<body>
<div id="list">
<div data-count="7" class="col-xs-6 col-lg-4">07</div>
<div data-count="8" class="col-xs-6 col-lg-4">08</div>
<div data-count="9" class="col-xs-6 col-lg-4">09</div>
<div data-count="10" class="col-xs-6 col-lg-4">10</div>
<div data-count="11" class="col-xs-6 col-lg-4">11</div>
<div data-count="12" class="col-xs-6 col-lg-4">12</div>
<div data-count="1" class="col-xs-6 col-lg-4">01</div>
<div data-count="2" class="col-xs-6 col-lg-4">02</div>
<div data-count="3" class="col-xs-6 col-lg-4">03</div>
<div data-count="4" class="col-xs-6 col-lg-4">04</div>
<div data-count="5" class="col-xs-6 col-lg-4">05</div>
<div data-count="6" class="col-xs-6 col-lg-4">06</div>
<div data-count="13" class="col-xs-6 col-lg-4">13</div>
</div>
</body>
</html>