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>

CSS

* {
  padding: 0;
  margin: 0;
}

.container {
  display: flex;
  width: 50%;
}
@media screen and (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}
.container .item1 {
  background-color: yellow;
  padding: 30px;
}
.container .contents {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 600px) {
  .container .contents {
    display: contents;
  }
}
.container .contents .item2 {
  background-color: green;
  color: white;
  padding: 30px;
}
@media screen and (max-width: 600px) {
  .container .contents .item2 {
    order: -1;
  }
}
.container .contents .item3 {
  background-color: blue;
  color: white;
  padding: 30px;
}
.container .item4 {
  background-color: red;
  color: white;
  padding: 30px;
}/*# sourceMappingURL=flex.css.map */