JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<div class="contaiter">
  <div class="block">block-1</div>
  <div class="block">block-2</div>
  <div class="block">block-3</div>
  <div class="block">block-4</div>
  <div class="block">block-5</div>
  <div class="block">block-6</div>
</div>

CSS

.contaiter {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 400px;
}

.contaiter::before {
  content: '';
  flex-basis: 100%;
  order: 2;

  width: 1px;
  background-color: red;
}

.block {
  width: 50%;
  height: 25%;
  background: royalblue;
  background-clip: content-box;
  box-sizing: border-box;
  padding: 5px;
  order: 3;
}

.block:nth-child(2),
.block:nth-child(3) {
  order: 1;
}