JSFiddle - React, Tailwind, and code Playground

by Dominik Wilk

HTML

<div class="container">
  <div>a</div>
  <div>b</div>
  <div class="c">c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
</div>

SCSS

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-wrap: wrap;
  height: 600px;
  background: gray;
  align-items: flex-start;
  align-content: flex-start;
  
  
  > div {
    padding: 10px;
    border: 1px black solid;
    flex-basis: 50%;
    order: 1;
  }
  
  .c {
    order: 4;
    
    @media (min-width: 400px) {
      order: order++;
    }
  }
}