Css 左浮动div位于另一个div下方

我有两个div，而（div1）是向左浮动的，而（div2）是向右浮动的。我正在创建一个响应式布局，当视口发生变化时，（div 1）将置于（div 2）之下。我通过MS Paint创建了一个简单的图像，以便于演示和编写一些代码。此外，两者都包含动态内容，因此它们的高度不能固定

没有javascript（如果可能的话），只有简单的CSS。我只知道如何将div 2放在div 1之下，但不知道如何将div 2放在div 1之下

有人知道我是如何做到这一点的吗

HTML:

//动态内容
//动态内容

---

HTML是自动生成的，因此在标记中，div1最初排在div2之前。不建议更改顺序（将div2置于div1之上），因为许多页面使用相同的布局。参见上面的代码

这是我的建议。使用媒体查询，找到希望

div

并排放置的最大宽度

在html中，像这样放置

div

（前面的右边）：

最后，要在右侧下方显示左侧的

div

，您应该在css中添加如下内容：

.div1 {
    float: left;
    width: 25%; 
}
.div2 {
    float: right;
    width: 75%;
}

@media all and (max-width: 480px) {
    .div1, .div2 { 
        float: none;
        display: block; 
    }
}

---

是一个演示这种编码的JSFIDLE。您只需调整浏览器大小，即可看到左侧

div

在右侧下方向右移动。

当视口大小调整到您希望更改的位置时，我将使用媒体查询更改应用于每个div的CSS样式。然后向右浮动div 1，向左浮动div 2，并给div 2留出足够大的右边距，以便将div 1向下推到下一行

将

float:left

放在两个位置上，然后将div2移到div1:）如果不将div2向上移动，我怀疑这是不可能的，所以您希望布局中语义排在第一位的东西在视觉上显示在第二位？@Doorknob Hm.在这种情况下，如何将div2放在顶部？：）重要的是，第1组必须始终处于下方请看这里：@Elmer哪个是侧边栏？由于左右浮动不受HTML中顺序的影响，您可以简单地将HTML放在前面（反之亦然），以达到所需的效果。不得重新排列HTML：（其他页面使用相同的顺序。在HTML中，Div1必须始终位于Div2之前。不能更改HTML顺序。只能更改CSS。即使重新排列HTML并且Div2写在Div1之前，Div1也将始终位于Div2的左侧。请参阅JSFIDLE。

.div1 {
    float: left;
    width: 25%; 
}
.div2 {
    float: right;
    width: 75%;
}

@media all and (max-width: 480px) {
    .div1, .div2 { 
        float: none;
        display: block; 
    }
}