No puedo entender cómo hacer que las columnas se puedan ordenar.

Quiero que después de que la imagen arrastre los datos debajo de 'imagen arrastrada' se mueva con esta imagen en su lugar.

enlace a un proyecto: https://saturn-handmade-slider.vercel.app/

Mi marcado es como:

 <div class='slider-container'> <div class='slider-track' id='slider'> //items here <div>ITEM1</div> <div>ITEM2</div> <div>ITEM3</div> </div> <div class='item-data'> <div class='row'>(data in "row"equal items quantity) <p>item1</p> <p>item2</p> <p>item3</p> </div> </div> <script> $("#slider").sortable({ revert: 100, axis: "x", }); </script>