JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>

CSS

.wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.wrap > .a {
    background: lime;
    order: 1;
}
.wrap > .b {
    background: orange;
    order: 2;
    flex: 1;
}
.wrap > .c {
    background: aqua;
    order: 3;
}
@media screen and (max-width: 500px) {
    .wrap > .b {
        background: orange;
        order: 3;
        min-width: 100%;
    }
    .wrap > .c {
        background: aqua;
        order: 2;
    }
}