3列响应式布局，移动时左列下方的右列

Question

我目前有这个：https://jsfiddle.net/Ldyj5x14/7/

我想要它做的是当视口宽度小于900px时，右列在下面左列。

我该怎么做？

HTML：

<div class="container">
    <div class="col-left">Left</div>
    <div class="col-right">Right</div>
    <div class="col-center">Center</div>
</div>

CSS：

.container {
  width: 900px;
}

.col-left {
  width: 200px;
  height: 500px;
  float: left;
  background: red;
}

.col-right {
  width: 200px;
  height: 500px;
  float: right;
  background: lightblue;
}

.col-center {
  width: 500px;
  height: 1000px;
  float: left;
  background: gray;
}

@media (max-width: 900px) {
  // put right column below the left column
}

Answer 1

你可以清除它但在流程中保留.center：

.container {
  width: 900px;
}

.col-left {
  width: 200px;
  height: 600px;
  float: left;
  background: red;
}

.col-right {
  width: 200px;
  height: 600px;
  float: right;
  background: lightblue;
}

.col-center {
  /* width: 500px; */ /* optionnal */
  height: 600px;
  overflow:hidden;
  background: gray;
}

@media (max-width: 900px) {
  .col-right {
    clear:left;
    float:left; /* maybe ? */
    }
}

<div class="container">
    <div class="col-left">Left</div>
    <div class="col-right">Right</div>
    <div class="col-center">Center</div>
</div>