JSFiddle - React, Tailwind, and code Playground

by Rocka

HTML

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

CSS

.wrapper {
  border: 1px solid black;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 100px;
  flex-grow: 0;
  margin: 10px;
  border: 1px solid black;
  padding: 30px;
  text-align: center;
}


@media screen and (max-width: 500px) {
  .b {
    order: -1;
    flex-basis: 300px;
  }
}