JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

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

@media only screen and (max-width: 600px) {
    .right {       
        float: left;
        width: 100%;
    }
    .left {       
        float: left;
        width: 100%;
    }
    .wrapper{
        width:100%;
        position: absolute;
        float: left;
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
    }
    div.wrapper > div {
	position: relative;
	float: right;
	display: block;
    min-height: 50px;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    }
   
}