d45sa15sadd2424sa54

by Divine Draft

HTML

<div class="container">

  <div class="sub-container">

    <section class="block first">
      <div class="one">1</div>
    </section>

    <section class="block second">
      <div class="one">2</div>
    </section>
    
 </div>

<section class="block three">
  <div class="three">3</div>
</section>

<section class="block four">
  <div class="four">4</div>
</section>

</div>

CSS

.container,.sub-container {display:flex;justify-content:space-between;width:600px;flex-wrap:wrap;}


.block {display:flex;background-color: #033;font-size:40px;color: #fff;text-align: center;align-items:center;height:300px;margin-bottom:20px;justify-content:center;}
.block:last-child {margin-bottom:0;}

.one,.second {width:290px;}
.second {background:blue;}
.three {background:black;width:100%;}
.four {background:red;width:100%;}


@media screen and (max-width:600px) {
.one {order:1;}
.second {order:4;width:100%;}
.three {order:3;}
.four {order:2;width:290px;}
}

JavaScript

function myFunction() {
$(function(){
  if ( $(window).width() < 600 ) {
     if ($('.container div').hasClass("sub-container")){ 
				$(".first").unwrap()	
    }} else {
    
     if ($('.container div').hasClass("sub-container")){} else {
    		$('.first, .second').wrapAll('<div class="sub-container">'); 
    }
        
        
    }
});
}

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