JSFiddle - React, Tailwind, and code Playground
HTML
<div class="section mcb-section shuffle ">
<div class="section_wrapper mcb-section-inner">
<div class="wrap mcb-wrap one valign-top clearfix" style="">
<div class="mcb-wrap-inner">
<div class="column mcb-column one-fourth column_hover_color background-hover2">
<div class="hover_color" style="background:;border-color:#AAABA5;" ontouchstart="this.classList.toggle('hover');">
<div class="hover_color_bg" style="background:#fff;border-color:#A9C2BF;">
<div class="hover_color_wrapper">
<h2>photographers</h2></div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_hover_color background-hover">
<div class="hover_color" style="background:;border-color:#AAABA5;" ontouchstart="this.classList.toggle('hover');">
<div class="hover_color_bg" style="background:#fff;border-color:#A9C2BF;">
<div class="hover_color_wrapper">
<h2>videographers</h2></div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_hover_color background-hover3">
<div class="hover_color" style="background:;border-color:#AAABA5;" ontouchstart="this.classList.toggle('hover');">
<div class="hover_color_bg" style="background:#fff;border-color:#A9C2BF;">
<div class="hover_color_wrapper">
<h2>online boutiques</h2></div>
</div>
</div>
</div>
<div class="column mcb-column one-fourth column_hover_color background-hover">
<div class="hover_color" style="background:;border-color:#AAABA5;" ontouchstart="this.classList.toggle('hover');">
<div class="hover_color_bg" style="background:#fff;border-color:#A9C2BF;">
<div class="hover_color_wrapper">
<h2>celebrants</h2></div>
</div>
</div>
</div>
<div class="column...
JavaScript
$(function() {
$(".shuffle").each(function() {
var parent = $(this),
divs = parent.children().remove();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
});