JSFiddle - React, Tailwind, and code Playground

HTML

<div id="superwrap">
<div id="col1">1</div>
<div id="col2">2</div>
<div id="col3">3</div>
</div> 

<div id="supersize"></div>

CSS

#superwrap { position: relative; width: 100%; min-width: 200px; }

#col1, #col2, #col3 {float: left;}

#col1 { background-color: cyan; width: 33.33%; min-width: 200px;}
#col2 {background-color: yellow; width: 33.33%; min-width: 200px;}
#col3 { background-color: green; width: 33.33%; min-width: 200px;}

JavaScript

var trigger;

resizeHandlr();

$(window).resize(function() {
    resizeHandlr();
});

function resizeHandlr(){
        trigger = $("#superwrap").width();
        $("#supersize").html("superwrap size: " + trigger + "px");
        if (trigger > 600){
            $("#col1, #col2, #col3").css("width", "33.33%");         
        } else if ( (trigger < 600) && (trigger > 400)){
            $("#col1, #col2").css("width","50%");  
            $("#col3").css("width","100%");
            $("#col1").prependTo("#superwrap");
        } else if (trigger < 400) {
            $("#col1, #col2, #col3").css("width", "100%");
            $("#col1").appendTo("#superwrap");
        }
    }