JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-xs-12">
    <span>Show or hide columns:</span>
    <input type="checkbox" checked="checked" class="column-selector" data-column="selectioncolumn" />Selection via dropdowns
    <input type="checkbox" checked="checked" class="column-selector" data-column="listcolumn" />Selected items
    <input type="checkbox" checked="checked"class="column-selector" data-column="mapcolumn" />Map
</div>

<div id="selectioncolumn" class="col-xs-4">
    Div 1
</div>
<div id="listcolumn" class="col-xs-4">
    Div 2
</div>
<div id="mapcolumn" class="col-xs-4">
    Div 3
</div>

JavaScript

$(document).ready(function () {
            $('.column-selector').on('change', function () {
                var numberOfColumns = $('#column-selector:checked').length;
                //NOTE: works when 3 columns. Could also work with 4, but with any more could have 5 visible columns
                //which doesn't multiple up to 12 with an integer
                var sizeOfVisibleColumn = numberOfColumns === 0 ? 4 : 12 / numberOfColumns;
                var columnClass = 'col-xs-' + sizeOfVisibleColumn;
                $.each($('.column-selector'), function (i, checkbox) {
                    var columnId = $(checkbox).data('column');
                    var column = $('#' + columnId);
                    column.hide();
                    if (column.hasClass('col-xs-12')) column.removeClass('col-xs-12');
                    if (column.hasClass('col-xs-6')) column.removeClass('col-xs-6');
                    if (column.hasClass('col-xs-4')) column.removeClass('col-xs-4');
                    if (column.hasClass('col-xs-3')) column.removeClass('col-xs-3');
                    column.addClass(columnClass);
                    if ($(checkbox).prop('checked')) column.show();
                });
            });
        });