JSFiddle - React, Tailwind, and code Playground

by Jérôme Sengel

HTML

<ul>
  <li class="xs-ps-0 sm-ps-0 lg-ps-0">0</li>
  <li class="xs-ps-2 sm-ps-1 lg-ps-1">1</li>
  <li class="xs-ps-3 sm-ps-3 lg-ps-2">2</li>
  <li class="xs-ps-4 sm-ps-4 lg-ps-4">3</li>
  <li class="xs-ps-5 sm-ps-5 lg-ps-5">4</li>
  <li class="xs-ps-6 sm-ps-6 lg-ps-6">5</li>
  <li class="xs-ps-7 sm-ps-7 lg-ps-7">6</li>
  <li class="xs-ps-8 sm-ps-8 lg-ps-8">7</li>
  <li class="xs-ps-1 sm-ps-2 lg-ps-3 big">8 (components)</li>
</ul>

CSS

ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}

li {
  flex: 0 0 33.333%;
  width: 33.3333%;
  height: 60px;
  background: lavender;
  outline: 1px blue solid;
  text-align: center;
  padding-top: 40px;
}

.big {
  flex-basis: 100%;
  width: 100%;
  background: lightgreen;
}

li.lg-ps-0 {
  order: 0
}

li.lg-ps-1 {
  order: 1
}

li.lg-ps-2 {
  order: 2
}

li.lg-ps-3 {
  order: 3
}

li.lg-ps-4 {
  order: 4
}

li.lg-ps-5 {
  order: 5
}

li.lg-ps-6 {
  order: 6
}

li.lg-ps-7 {
  order: 7
}

li.lg-ps-8 {
  order: 8
}

@media(max-width: 700px) {
  li {
    flex-basis: 50%;
    width: 50%;
  }
  li.sm-ps-0 {
    order: 0
  }
  li.sm-ps-1 {
    order: 1
  }
  li.sm-ps-2 {
    order: 2
  }
  li.sm-ps-3 {
    order: 3
  }
  li.sm-ps-4 {
    order: 4
  }
  li.sm-ps-5 {
    order: 5
  }
  li.sm-ps-6 {
    order: 6
  }
  li.sm-ps-7 {
    order: 7
  }
  li.sm-ps-8 {
    order: 8
  }
}

@media(max-width: 450px) {
  li {
    flex-basis: 100%;
    width: 100%;
  }
  li.xs-ps-0 {
    order: 0
  }
  li.xs-ps-1 {
    order: 1
  }
  li.xs-ps-2 {
    order: 2
  }
  li.xs-ps-3 {
    order: 3
  }
  li.xs-ps-4 {
    order: 4
  }
  li.xs-ps-5 {
    order: 5
  }
  li.xs-ps-6 {
    order: 6
  }
  li.xs-ps-7 {
    order: 7
  }
  li.xs-ps-8 {
    order: 8
  }
}