You can use flex to change the order of the HTML elements very easily.
flex order: 0 by changing the order value you can decide where in the column the element appears
const ascButton= document.getElementById('asc') const decButton= document.getElementById('dec') //callback function for soring in ascending order const ascending = (a,b)=> a.innerHTML - b.innerHTML //callback function for soring in descending order const descending = (a,b)=> b.innerHTML - a.innerHTML let currentOrder = ascending ascButton.addEventListener('click', ()=>{ currentOrder = ascending order() }) decButton.addEventListener('click', ()=>{ currentOrder = descending order() }) const order = function(){ const ordered = [...document.getElementsByClassName('col')].sort(currentOrder) ordered.forEach((elem, index)=>{ elem.style.order = index }) } order().row{ display: flex; flex-direction: column; } .col{ padding: 20px; border: 1px solid gray; margin: 5px; order:3; }<div class="row"> <div class="col " id="one">1</div> <div class="col " id="two">2</div> <div class="col " id="three">3</div> <div class="col " id="ten">10</div> <div class="col " id="four">4</div> <div class="col " id="five">5</div> </div> <button id="asc">ASC</button> <button id="dec">DESC</button>You can find a much more complex implementation here https://jsfiddle.net/nijeesh4all/on5rsax8/