onotole,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#list{
width:300px;
}
#list>div{
float: left;
width:32%;
height:50px;
border:1px #FF0033 solid;
text-align:center;
line-height:2em;
}
</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")
});
function printNumbers(arr, cols) {
var fragment = document.createDocumentFragment();
var cNum = arr.length;
var step = Math.ceil(cNum / cols);
for (var i = 0; i < step; i++) {
fragment.appendChild(arr[i]);
for (var k = 1; k < cols; k++) {
var n = i + step * k;
if (n < cNum) fragment.appendChild(arr[n]);
else fragment.appendChild(document.createElement('div'))
}
}
return fragment
}
$(printNumbers(arr, 3)).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>