JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">
  <div class="item1">item1</div>
  <div class="contents">
    <div class="item2">item2</div>
    <div class="item3">item3</div>
  </div>
  <div class="item4">item4</div>
</div>

SCSS

.container {
  display: flex;
  width: 50%;
  @media screen and (max-width: 600px) {
    flex-direction: column;
  }

  .item1 {
    background-color: yellow;
    padding: 30px;
  }
  .contents {
    display: flex;
    flex-direction: column;
    @media screen and (max-width: 600px) {
      display: contents;
    }
    .item2 {
      background-color: green;
      color: white;
      padding: 30px;
      @media screen and (max-width: 600px) {
        order: -1;
      }
    }
    .item3 {
      background-color: blue;
      color: white;
      padding: 30px;
    }
  }
  .item4 {
    background-color: red;
    color: white;
    padding: 30px;

  }
}