JSFiddle - React, Tailwind, and code Playground

by Vladimir Kutepov

HTML

<div class="container">
  <div class="left-bar">Left Bar</div>
  <div class="center-bar">Center<br/>Bar</div>
  <div class="right-bar">Right Bar</div>
</div>

CSS

.left-bar { background: Pink }
.center-bar { background: Gold }
.right-bar { background: Plum }

/* mobile, just change order */
@media (max-width: 320px) {
  .container {
    display: flex;
    flex-direction: column;
  }
  .left-bar { order: 1; }
  .center-bar { order: 3; }
  .right-bar { order: 2; }
}

/* tablet */
@media (min-width: 321px) and (max-width: 599px) {
  .container::after { /* clearfix */
    display: table;
    clear: both;
    content: '';
  }
  .left-bar,
  .right-bar { float: left; width: 40%; }
  .center-bar { float: right; width: 60%; }
}

/* desktop */
@media (min-width: 600px) {
  .container {
    display: flex;
  }
  .left-bar,
  .right-bar { flex-shrink: 0; width: 25%; }
  .center-bar { flex-grow: 1; }
}