JSFiddle - React, Tailwind, and code Playground

by bstst

HTML

<ul class="some-menu">
    <li>bb 1</li>
    <li>bb 2</li>
    <li>bb 3</li>
    <li>bb 4</li>
    <li>bb 5</li>
    <li>bb 6</li>
    <li>bb 7</li>
    <li>bb 8</li>
    <li>bb 9</li>
    <li>bb 10</li>
</ul>

CSS

.cols, .col {
    margin: 0;
    padding: 0;
}
.col {
    float: left;
}

JavaScript

var reorder = function ($el, cols) {
    var cache;
    if (!$el.data('cache')) {
        $el.data('cache', $el.clone());
    }
    cache = $el.data('cache').clone();
    var $out = $('<div class="cols">').addClass(cache.attr('class'));
    var $children = cache.find('li').clone();
    var perCol = Math.ceil($children.length / cols);

    $children.each(function (i) {
        if (i % perCol === 0) {
            $out.append($('<ul class="col">').width(100 / cols + '%'));
        }
        $out.find('.col:last').append($(this));
    });

    $out.data({
        cache: cache
    });
    $el.replaceWith($out);
}

var columns;
$(window).on('resize.columns', function () {
    var width = $('.some-menu').width();

    var newColumns;
    if (width > 400) {
        newColumns = 4;
    } else if (width > 300) {
        newColumns = 3;
    } else if (width > 200) {
        newColumns = 2;
    } else {
        newColumns = 1;
    }

    if (columns != newColumns) {
        reorder($('.some-menu'), newColumns);
    }
    columns = newColumns;
});
$(window).trigger('resize.columns');