JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap">

<div class="w-1/3" style="order: 1">Item 1</div>
<div class="w-1/3" style="order: 1">Item 2</div>
<div class="w-1/3" style="order: 1">Item 3</div>

<div class="w-1/3" style="order: 2">Item 4</div>
<div class="w-1/3" style="order: 2">Item 5</div>
<div class="w-1/3" style="order: 2">Item 6</div>

<div class="w-1/3" style="order: 3">Item 7</div>
<div class="w-1/3" style="order: 3">Item 8</div>
<div class="w-1/3" style="order: 3">Item 9</div>

<div class="w-full p-3 text-center detail-row bg-cyan-300">
Details go here...
</div>

</div>

CSS

.w-1\/3 {
  order: 0;
}

.detail-row {
  order: 2;
}