JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="section1">Section 1</div>
  <div class="section2">Section 2</div>
  <div class="section3">Section 3</div>
</div>

CSS

* { border: 1px dashed red; }

@media (max-width: 668px){
    .container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-self: flex-start;
    }
    .container .section1{
        height: 300px;
    }
    .container .section1, .container .section3{
        flex: 0 0 262px;
        margin: 3px;
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .container .section2{
        flex: 0 0 500px;
        flex-grow: 0;
        flex-shrink: 0;
        order: 1;
        min-height: 235px;
    }

}

@media (max-width: 940px){
    .container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-self: flex-start;
    }

    .container .section1, .container .section3{
        height: 300px;
    }
    .section1, .section3 {
        flex: 0 0 262px;
        margin: 3px;
        display: block;
        flex-grow: 0;
        flex-shrink: 0;
    }

    .container .section2{
        flex: 0 0 500px;
        flex-grow: 0;
        flex-shrink: 0;
        order: 1;
        min-height: 235px;
    }

}