JSFiddle - React, Tailwind, and code Playground

Flexbox, change order, responsive

by Bianca Kuehweidner

HTML

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child topper">4</div>
  <div class="child">5</div>
  <div class="child">6</div>
  <div class="child">7</div>
  <div class="child">8</div>
</div>

CSS

* {
  box-sizing: border-box;
}
.parent {
  width: 50%;
  margin: auto;
  display: flex;
  flex-wrap:wrap;
}

.child {
  height: 40px;
  line-height: 40px;
  background: pink;
  flex: 0 0 25%;
    text-align: center;
  border:1px solid grey;
  order:1;
}

.wider {
  flex: 0 0 66.66%;
}

@media (max-width:600px) {
  .child {
    flex: 0 0 100%;
  }
  .topper {
    order:0;
    background: orange;
  }
}