JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
  <div id="dv_7" data-order=7>7</div>
  <div id="dv_1" data-order=1>1</div>
  <div id="dv_8" data-order=8>8</div>
  <div id="dv_4" data-order=4>4</div>
  <div id="dv_11" data-order=11>11</div>
  <div id="dv_2" data-order=2>2</div>
</div>

<button onclick="sort()">
Sort
</button>

CSS

body { padding: 1em; }

JavaScript

function sort() {

  var main = document.getElementById( 'main' );

  [].map.call( main.children, Object ).sort( function ( a, b ) {
console.log(a.dataset.order);
      return +a.dataset.order - +b.dataset.order;
  }).forEach( function ( elem ) {
      main.appendChild( elem );
  });

}