JSFiddle - React, Tailwind, and code Playground

HTML

<div class= "switchme_container">
    <div class = "switchme">
        <div>Content 1</div>
        <div>Content 1</div>
        <div>Content 1</div>
        <div>Content 1</div>
    </div>
    <div class = "switchme">
        <div>Content 2</div>
        <div>Content 2</div>
        <div>Content 2</div>
        <div>Content 2</div>
    </div>
    <div class = "switchme">
        <div>Content 3</div>
        <div>Content 3</div>
        <div>Content 3</div>
        <div>Content 3</div>
    </div>
</div>
<button id="randomize">Click to randomize content</button>

CSS

.switchme { padding: 10; border: 1px solid black; }

JavaScript

$('#randomize').click(function(ev){
    ev.preventDefault();
   
    var $sc = $('.switchme_container'),
        contentHolder = [],
        randomIndex;
    
    // detach .switchme elements from page and add to contentHolder array
    $sc.find('.switchme').each(function(i, el){
        contentHolder.push($(this).detach());
    });
    
    while (contentHolder.length) {
        
        // pick a random index of the contentHolder array
        randomIndex = Math.floor(Math.random() * contentHolder.length);
        
        // append it to the container
        $sc.append(contentHolder[randomIndex]);
        
        // slice that element out of the contentHolder array
        contentHolder = contentHolder.slice(0, randomIndex)
            .concat(contentHolder.slice(randomIndex + 1, contentHolder.length));
    }
});