JSFiddle - React, Tailwind, and code Playground

by Ying Chor Ding

HTML

<article>
<div class="column-1">
   text Content
</div>
<div class="column-2">
    slide Content
</div>
</article>

CSS

.column-1 {
  display: flex;
  float: left
}
.column-2 {
 display: flex;float: left
}
.article {
  display: flex;float: left
}

JavaScript

$(document).ready(function(){
    if ( $(window).width() < 768 ){
        $('.column-1').before($('.column-2'));
    }
    
    $(window).resize(function(){
        if ( $(window).width() < 768 ){
            $('.column-1').before($('.column-2'));
        }else{
            $('.column-2').before($('.column-1'));
        }
    });
});