JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-container">
    <div class="col col1of4">
        <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
        <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    </div>
    <div class="col col1of2">
        <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
        <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
        <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
        <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    </div>
    <div class="col col1of4 col1of4--last">
        <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
        <div class="col__inner">sssadksadkaslkslasasldkasddsa</div>
    </div>
</div>

CSS

.col-container {
    display: flex;
}
.col1of2 {
    width: 50%;
    background: red;
}
.col1of4 {
    width: 25%;
    background: yellow;
}
.col1of4--last {
    background: blue;
}
@media all and (max-width: 1000px) {
    .col-container {
        flex-direction: column;
        flex-wrap: wrap;
        height: 100px;
    }
    .col1of2 {
        order: 1;
    }
    .col1of4 {
        width: 50%;
    }
}