How To – 혼합 컬럼 레이아웃

<div class="row">
  <div class="column" style="background-color:#aaa;">
  <h2>1열</h2>
  <p>텍스트 입력..</p>
  </div>
  <div class="column" style="background-color:#bbb;">
  <h2>2열</h2>
  <p>텍스트 입력..</p>
  </div>
  <div class="column" style="background-color:#ccc;">
  <h2>3열</h2>
  <p>텍스트 입력..</p>
  </div>
  <div class="column" style="background-color:#ddd;">
  <h2>4열</h2>
  <p>텍스트 입력..</p>
  </div>
</div>

.column {
  float: left;
  width: 25%;
}
.row:after {
  content: "";
  display: table;
   clear: both;
}
@media screen and (max-width: 900px) {
  .column {
    width: 50%;
  }
}
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}