JSFiddle - React, Tailwind, and code Playground

by jordinebot

HTML

<div class="row">
        <div id="the-pink" class="lg-6 md-12 sm-12"><!-- content --></div>
        <div id="the-violet" class="lg-6 md-12 sm-12"><!-- content --></div>
    </div>
    <div class="reversed row">
        <div id="the-pink" class="lg-6 md-12 sm-12"><!-- content --></div>
        <div id="the-violet" class="lg-6 md-12 sm-12"><!-- content --></div>
    </div>

SCSS

#the-pink {
  background-color: #ff9595;
}

#the-violet {
  background-color: #878fff;
}

.row {
  position: relative;
  margin-bottom: 20px;
  &:after {
        content: "";
        display: table;
        clear: both;
    }
}

.md-12 {
  width: 100%;
  height: 200px;
}

.reversed {
  .md-12 {
    position: absolute;
    top: 0;
    &:first-child {
      margin-top: 200px;
    }
  }
}