JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="block_1"></div>
    <div class="block_2"></div>
    <div class="block_3"></div>
    <div class="block_4"></div>
</div>

CSS

#wrapper {
    margin:0 auto;
    padding:0;
    width:100%;
    position:relative;
    clear:both;
}
.block_1 {
    float:left;
    width:32%;
    margin: 0 1% 0 0;
    height: 50px;
    background-color:red;
}
.block_2 {
    float:left;
    width:32%;
    margin: 0 1%;
    height: 50px;
    background-color:green;
}
.block_3 {
    float:left;
    width:100%;
    height: 50px;
    background-color:blue;
}
.block_4 {
    float:left;
    width:32%;
    height: 50px;
    margin: 0 0 0 1%;
    background-color:orange;
    position:absolute;
    right:0;
}

@media screen and (max-width: 800px) {

   .block_1 {
    width:48%;
}
.block_2 {
    width:48%;
    margin:0 0 0 1%;
    float:right;
} 
    
 .block_3 {
    width:100%;
}
.block_4 {
    width:100%;
   position:relative;
   margin:0;
       
        
}   
    

}