JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li class="half sm-full sm-highlight">1</li>
  <li class="half sm-full sm-highlight">2</li>
  <li></li>
  <li></li>
</ul>

SCSS

* {margin:0; padding:0;}
ul {display:flex; flex-wrap:wrap; list-style:none;}
li {flex:0 0 33.3333%; height:20px;}

.half {flex-basis:50%;}


li:nth-child(1) {background-color:red;}
li:nth-child(2) {background-color:blue;}
li:nth-child(3) {background-color:purple;}
li:nth-child(4) {background-color:lime;}
li:nth-child(5) {background-color:yellow;}
li:nth-child(6) {background-color:grey;}
li:nth-child(7) {background-color:pink;}

@media screen and (max-width: 400px) {
  li {flex-basis:50%; order:1;}
  .sm-full {flex-basis:100%;}
  
  .sm-highlight {order:-1;}
  .sm-highlight ~ li:not(.sm-highlight) {order:2;}
  // .sm-highlight + li:not(.sm-highlight) {order:2;}
}