JSFiddle - React, Tailwind, and code Playground

by Tejash Soni

HTML

<div class="container">
      <div class="brownC"></div>
      <div class="content">
        <div class="left">  
          <div class="aquablue"></div>
          <div class="yellowC"></div>
        </div>
        <div class="right"> 
          <div class="greenC"></div>
          <div class="blueC"></div>
        </div>
      </div>
    </div>

CSS

body{
      margin: 0;
      padding: 0;
    }
    .container{
      display: flex;
      flex-direction: column;
    }
    .aquablue{
      padding: 50px;
      background-color: #B0C4DE;
      order: 1;
    }
    .brownC{
      padding: 50px;
      background-color: #663300;
    }
    .yellowC{
      padding: 50px;
      background-color:  #FFCC00;
      order: 3;
    }
    .greenC{
      padding: 50px;
      background-color: #00FF00;
      order: 4;
    }
    .blueC{
      padding: 50px;
      background-color: #336699;
      order: 5;
    }
    @media(min-width: 768px){
      .container{
        display: flex;
        flex-direction: column;
      }
      .content{
        display: flex;
        order: 2;
      }
      .left{
        display: flex;
        flex-direction: column;
        width: 50%;
      }
      .right{
        display: flex;
        flex-direction: column;
        width: 50%;
      }
      .brownC{
        padding: 50px;
        background-color: #663300;
        width: 100%;
        order: 1;
      }
      .yellowC{
        padding: 50px;
        background-color:  #FFCC00;
      }
      .greenC{
        padding: 50px;
        background-color: #00FF00;
      }
      .blueC{
        padding: 50px;
        background-color: #336699;
      }
    }

JavaScript

$(document).ready(function(){
	$(window).resize(function(){
    	if($(window).width() <= 768){
        	jQuery(".aquablue").after(jQuery(".brownC"));
        }else{
        jQuery(".content").before(jQuery(".brownC"));
        }
    });
    
    $(window).trigger('resize');
})