JSFiddle - React, Tailwind, and code Playground

by LimitedWard

HTML

<div class="right"></div> 
<div class="left"></div>

CSS

.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f
}

.right {
    float: right;
    width: 250px;
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f
}

@media only screen and (max-width: 600px) {
    .right {
        float: left;
        width: 100%;
    }
}

JavaScript

$(window).resize(function(){
    if($(window).width() <= 600) {
        $('.right').before($('.left'));
    } else {
        $('.right').after($('.left'));
    }
});