JSFiddle - React, Tailwind, and code Playground

by alirokni

HTML

<div>https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties</div>

<hr/>

<div class="container">
  <div class="row">
    <div class="col1">col 1</div>
    <div class="col2">col 2</div>
  </div>
</div>

<hr/>

<div class="container1">
  <div class="row1">
    <div class="col11">col 1</div>
    <div class="col21">col 2</div>
  </div>
</div>

CSS

hr {
  margin: 20px 0;
  clear: both;
}

.container1 {
  position: relative;
  margin-top: 20px
}

.col11 {
  background: #efefef;
  display: inline-block;
  width: 49.5%;
}

.col21 {
  background: #eaeaea;
  display: inline-block;
  width: 49.5%;
}

@media screen and (max-width:700px) {
  .col11 {
    background: red;
    position: absolute;
    top: 0;
    width: 100%;
  }
  .col21 {
    background: green;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
}

.row {
  display: flex;
}

.col1 {
  background: yellow;
  flex: 1;
}

.col2 {
  background: white;
  flex: 1;
}

@media screen and (max-width:700px) {
  .col1 {
    background: brown;
    order: 2
  }
  .col2 {
    background: gray;
    order: 1
  }
}