<ul class="container">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
  <li class="item">4</li>
  <li class="item">5</li>
  <li class="item">6</li>
</ul>
.container {
  display: flex;
  flex-flow: row wrap;
  list-style: none;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: tomato;
  background: gold;
  width: 80px;
  height: 80px;
  padding: 8px;
  margin: 8px;
  box-shadow: 3px 3px 5px rgb(0, 0, 0, .3);
}

.item:nth-of-type(1) {
  order: 6;
}

.item:nth-of-type(2) {
  order: 2;
}

.item:nth-of-type(3) {
  order: 4;
}

.item:nth-of-type(4) {
  order: 3;
}

.item:nth-of-type(5) {
  order: 5;
}

.item:nth-of-type(6) {
  order: 1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.