JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="main"> 
  <div class="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

.main {
  width: 800px;
}

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

.container {
  display: flex;
}

.first {
  margin-right: 10px;
  background-color: #999;
}

.three {
  width:100%;
  background-color: #909;
}

.four {
  width:100%;
  background-color: #009;
}

JavaScript

$(window).on('load resize', function(){
  $($(window).width() < 575 ? '.main' : '.container').append($('.second'));
})