JSFiddle - React, Tailwind, and code Playground

by Alexis LĂłpez Espinoza

HTML

<div id = "contenedor">
    <div class='Column_dias Dia_column_1'>1</div>
    <div class='Column_dias Dia_column_4'>4</div>
    <div class='Column_dias Dia_column_3'>3</div>
    <div class='Column_dias Dia_column_2'>2</div>
</div>
  
<button id = "ordenar">Ordenar</button>

CSS

div:nth-child(even){
  background: lightgreen;
}

div:nth-child(odd){
  background: lightblue;
}

JavaScript

var contenedor = document.getElementById("contenedor"),
    boton = document.getElementById("ordenar"),
    array = [];

boton.addEventListener("click", function(){
    if (contenedor.hasChildNodes()){
        var hijos = contenedor.childNodes;
      
        for (var i in hijos) 
            if (hijos[i].tagName == "DIV") array.push(hijos[i]);
      
        contenedor.innerHTML = null;
      
        array.sort(function(a, b){
            var claseA = a.className.split(" ")[1],
                claseB = b.className.split(" ")[1],
                numA = claseA.substr(claseA.lastIndexOf("_") + 1),
                numB = claseB.substr(claseB.lastIndexOf("_") + 1);
            return numA - numB;
        });
      
        for (var j in array) contenedor.appendChild(array[j]);
    }  
}, false);