CSS媒体查询：如何在小屏幕上使右栏显示在左上方？

调整窗口大小时，如何使右栏位于左栏上方？默认情况下，右栏在左栏下方滑动

以下是我的目标示意图：

更宽的窗口：

++++++++++++++++++++++++++

|左栏|右栏|

++++++++++++++++++++++++++

以下是用于生成该布局的CSS：

CSS 以下是我想在更窄的窗口上显示的内容，如移动设备：

++++++++++++++

|右栏|

|左列|

++++++++++++++

---

我知道媒体查询是关键，但我不知道使用什么代码。有什么建议吗？

一种方法是使用和

媒体查询，如果你不熟悉的话，基本上会说‘在这种特殊情况下应用CSS’，而绝对定位让我们可以将div移动到任何我们想要的地方

在下面的代码中，当视图缩小到700px以下时，我们会滑动div。要使小提琴显示这一点，可以缩小浏览器窗口或缩小“结果”面板，直到看到过渡。（在我的电脑上，滑动结果面板的滞后性明显降低）

css

---

再添加一点代码。你的专栏是浮动的吗？我知道这很容易，但如何使#在左边专栏的顶部？哦，对不起@LenaQueen，我误解了！我更新了我的答案；这是

.left { 
  width:auto;
  overflow:hidden;
  float:none;
}
.right {
  width:500px;
  float:right
}

#left {
  background: #eee;
  height: 60px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
}
#right {
  background: #ddd;
  height: 60px;
  width: 200px;
  position: absolute;
  top: 0;
  left: 200px;
}

@media screen and (max-width: 700px) {
  #left {
    background: #2f6497;
    top: 60px;
  }
  #right {
    background: #002d62;
    left: 0;
  }
}