samtam,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script>
window.addEventListener("DOMContentLoaded", function() {
function c(a) {
var b = -1;
["cat-3", "cat-1", "cat-4", "cat-2"].some(function(c, d) {
-1 < a.indexOf(c) && (b = d);
return -1 < b
});
return b
}
var d = document.querySelector("ul");
[].slice.call(document.querySelectorAll("body > ul > li"), 0)
.sort(function(a, b) {
return c(a.className) - c(b.className)
})
.forEach(function(a) {
d.appendChild(a)
})
});
</script>
</head>
<body>
<ul>
<li class="cat-1">1</li>
<li class="cat-2">2</li>
<li class="cat-3">3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="cat-4">4</li>
</ul>
</body>
</html>