Html 如果窗口变小，则向下移动中间div

我有三个沙发并排放着。如果浏览器窗口变小，我希望中间的div在第一个div下向下移动，右div移动到“中间”

为了更好地理解，我做了以下提纲

---

有人能告诉我你是怎么做到的吗？

在css中对div使用相对定位并浮动它们。例如：

position:relative;
float:left;

---

这只是一个快速的技巧，不过你可能需要花点时间。

[
.盒子{
宽度：200px；
高度：200px；
浮动：左；
边框：1px实心#999；
利润率：5px1%；
背景色：#ccc；
}
.中{
浮动：对；
}
.最后{
背景色：红色；
}]

这应该让您开始学习。我用Candlejack的小提琴叉子，试图提供一个css唯一的解决方案

基本上你把第二节放在最后：

<section id='container'>
  <div id='box-1' class='myBox'>1</div>
  <div id='box-3' class='myBox'>3</div>
  <div id='box-2' class='myBox'>2</div>
</section>

---

当窗口较窄时，可能会从上到下（而不是从左到右）更改流。如果我理解正确，您希望有一个响应页面，但希望更改布局更改时div的显示顺序？例如，如果它是一个“标准”响应页面，则绿色div将位于蓝色div的下方，因此您想更改顺序？将源代码顺序更改为1-3-2，并向左浮动1，向右浮动3…@Candlejack我不想更改顺序。正常情况下，如果布局变小，绿色框将向下移动。但是我想让红色方块在蓝色方块下面移动，所以绿色方块在蓝色方块的右边one@Ich啊，我明白了。我相信我误解了你的目标，在这种情况下，我将投票删除我的答案，因为它不符合你询问的精神。对不起。我告诉过你使用绝对位置。这是相对的！当我看到你的小提琴时，红色的盒子（标记中的最后一个）已经在中间看到了。我对这个问题的理解是，框的顺序只有在调整窗口大小时才会改变。你能为我澄清一下你的小提琴是否只是故意显示最后的顺序吗？“我希望中间的div移到第一个div下面，而右边的div移到“中间”。-我没有看到这种情况发生。。！我想如果op选择了这个正确的答案，对他来说是可行的，是的，它正在发生。据我所查，最后一个div就在原地。。。奇怪的是，现在我明白你的意思了，不管怎样，我认为它对OP有效，因为将第三个div移到右边，你可以添加这样的内容“@media-only screen and（max-width:XXXpx）{box-3:{float:left；}”。也许OP是以我的答案为出发点自己想出来的，也许小提琴真的是OP需要的东西。。。对不起，我的英文在这评论

<section id='container'>
  <div id='box-1' class='myBox'>1</div>
  <div id='box-3' class='myBox'>3</div>
  <div id='box-2' class='myBox'>2</div>
</section>

#container { display:inline-block; width:100%; padding: 0.5em 0; border: 1px solid black;}
.myBox { display:inline-block; min-height: 100px; width:300px; margin: 0.5em 0 0.5em 3%; float:left; display: block; }
#box-1 { border:1px solid blue;}
#box-2 { border:1px solid red; display: inline-block; float: left;}
#box-3 { border:1px solid green;float:right;}