JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div class="box">
    <div class="a">1</div>
    <div class="b">2</div>
</div>

CSS

div.box {
    display: flex;
}
.a {
    border: 1px solid red;
    flex: 2;
    height: 300px;
}
.b {
    border: 1px solid blue;
    flex: 1;
}
@media (max-width: 800px){
    .box {
        /* flex-direction: column-reverse; */
    }
    .a {
        order: 2
    }
    .b {
        order: 1;
    }
}
@media (max-width: 600px){
    .box {
        flex-direction: column-reverse;
    }
}