JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="list">
  <li data-index="3">Baz</li>
  <li data-index="1">Foo</li>
  <li data-index="2">Bar</li>
</ul>

CSS

li:before{
    content: attr(data-index) " - ";
}

JavaScript

function sortChildren(wrap, f, isNum) {
    var l = wrap.children.length,
        arr = new Array(l);
    for(var i=0; i<l; ++i)
        arr[i] = [f(wrap.children[i]), wrap.children[i]];
    arr.sort(isNum
             ? function(a,b){ return a[0]-b[0]; }
             : function(a,b){ return a[0]<b[0] ? -1 : a[0]>b[0] ? 1 : 0; }
            );
    var par = wrap.parentNode,
        ref = wrap.nextSibling;
    par.removeChild(wrap);
    for(var i=0; i<l; ++i) wrap.appendChild(arr[i][1]);
    par.insertBefore(wrap, ref);
}

sortChildren(
    document.getElementById('list'),
    function(li) { return +li.dataset.index; }
);