anonymous No title
No License HTML
2021年05月15日
Copy Clone
 <div class="wrap">
    <div class="item green"><p>1</p></div>
    <div class="item pink"><p>2</p></div>
    <div class="item orange"><p>3</p></div>
  </div>
  <style>
p{text-align:center;color:#fff;}

.wrap{
  display:flex;
  width:100%;
  height:400px;
  flex-wrap:wrap;
  flex-direction:column;
}
.green{
  background:green;
  flex:1 1 80%;
}
.pink{
  background:pink;
  flex:1 1 20%;
}
.orange{
  background:orange;
  flex:1 1 100%;
}
@media (max-width:800px){
  .wrap{
    flex-wrap: unset;/* nowrap */
  }
  .green{
    background:green;
    flex:1 1 100%;
  }
  .pink{
    background:pink;
    flex:1 1 100%;
    order:1;
  }
  .orange{
    background:orange;
    flex:1 1 100%;
  }
}
/* --------------------- */
  </style>
 <div class="wrap">
    <div class="item green"><p>1</p></div>
    <div class="item pink"><p>2</p></div>
    <div class="item orange"><p>3</p></div>
  </div>
  <style>
p{text-align:center;color:#fff;}

.wrap{
  display:flex;
  width:100%;
  height:400px;
  flex-wrap:wrap;
  flex-direction:column;
}
.green{
  background:green;
  flex:1 1 80%;
}
.pink{
  background:pink;
  flex:1 1 20%;
}
.orange{
  background:orange;
  flex:1 1 100%;
}
@media (max-width:800px){
  .wrap{
    flex-wrap: unset;/* nowrap */
  }
  .green{
    background:green;
    flex:1 1 100%;
  }
  .pink{
    background:pink;
    flex:1 1 100%;
    order:1;
  }
  .orange{
    background:orange;
    flex:1 1 100%;
  }
}
/* --------------------- */
  </style>
No one still commented. Please first comment.