JSFiddle - React, Tailwind, and code Playground

by salman

HTML

<ul>
    <li>666</li>
    <li>555</li>
    <li>444</li>
    <li>333</li>
    <li>222</li>
    <li>111</li>
</ul>

JavaScript

$(function () {
    var resizeTimeout, sortedReverse = false;
    $(window).resize(function () {
        if (resizeTimeout) {
            window.clearTimeout(resizeTimeout);
        }
        resizeTimeout = window.setTimeout(function () {
            var windowWidth = $(window).width();
            console.log("window resize timeout " + windowWidth);
            if ((windowWidth < 767 && !sortedReverse) || (windowWidth >= 767 && sortedReverse)) {
                $("ul").append(function () {
                    return $(this).children().detach().toArray().reverse();
                });
                sortedReverse = !sortedReverse;
                console.log("reversed");
            }
        }, 100);
    }).trigger("resize");
});