JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="div1" class="parte1" style="color:black">
        <p> Conteúdo da Div </p>
    </div>
    <div id="div2" class="parte2" style="color:blue">
        <p> Conteúdo da Div </p>
    </div>
    <div id="div3" class="parte3" style="color:red">
        <p> Conteúdo da Div </p>
    </div>
    <div id="div4" class="parte4" style="color:green">
        <p> Conteúdo da Div </p>
    </div>
 </body>

JavaScript

function inverterPosicoes(el1, el2) {
    el1 = $(el1);
    el2 = $(el2);
    var prev = el1.prev();
    var parent = el1.parent();
    
    // Move o primeiro elemento para a posição do segundo
    el2.after(el1);
    
    // Move o segundo elemento para onde o primeiro estava
    if(prev.length) {
        // Se o primeiro elemento não era o primeiro filho
        prev.after(el2);
    } else {
        // Se o primeiro elemento era o primeiro filho
        parent.prepend(el2);
    }
}

inverterPosicoes('#div1', '#div4');