JSFiddle - React, Tailwind, and code Playground

HTML

<div class="departamento">
	<h5>vinho</h5>
    <ul>
    	<li>vinho tinto</li>
        <li>vinho branco</li>
    </ul>
    <h5>cerveja</h5>
    <ul>	
    	<li>cerveja sem alcool</li>
        <li>cerveja com alcool</li>
    </ul>
    <h5>licor</h5>
    <ul>
    	<li>Licor branco</li>
        <li>licor vermelho</li>
    </ul>
    <h5>cafe</h5>
    <ul>
    	<li>chá</li>
        <li>cafeina</li>
    </ul>
</div>

JavaScript

$(document).ready(function(){
    var elems = $(".departamento h5, .departamento ul");

    elems.changeOrder = function (old_index, new_index) {
      if (new_index >= this.length) {
        var k = new_index - this.length;
        while ((k--) + 1) {
            this.push(undefined);
        }
      }
      this.splice(new_index, 0, this.splice(old_index, 1)[0]);
    };
    
    elems.reflux = function(){
        var oldListOfElements = $(this.selector),
            newListOfElements = this.clone();
        $(newListOfElements).insertAfter(oldListOfElements.last());
        $(oldListOfElements).remove();
    }

    elems.changeOrder(2, 0); // [2] == Titulo Cerveja vai para [0]
    elems.changeOrder(3, 1); // [3] == Lista de cervejas vai para [1]

    elems.reflux(); // Após trocar a ordem, refaz o DOM de acordo com a ordem;
});