css - 3 列响应式布局，右列在移动端左列下方

Question

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

我想要它做的是当视口(viewport)宽度小于 900 像素时，让右列位于左列下方。

我该怎么做？

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>