Html 带右浮动的DIV超过带左浮动的DIV

嗨，我有一个导航div，它的底部有一个div。这个div还有另外两个div“div 1”和“div 2”（见图）。现在，我在平板电脑设备上关闭了导航，所以我会在第一个div上显示包含float:right的第二个div，第一个div包含float:left，如图所示。我该怎么做？现在第一个div超过了第二个div。谢谢

您可以为此目的使用

你可以在某个时刻操纵你的div来改变它们的样式

@media (max-width: 600px) {
  #someElement {
    float: left;
  }
}

你可以为此目的使用

你可以在某个时刻操纵你的div来改变它们的样式

@media (max-width: 600px) {
  #someElement {
    float: left;
  }
}

---

您可以尝试以下操作，以及媒体查询，以移除800px的浮点值：

JSFiddle：

CSS:

HTML:

第二组
第一组

您可以尝试以下操作，以及媒体查询，以移除800px的浮点值：

JSFiddle：

CSS:

HTML:

第二组
第一组

您可以使用

Flexbox

执行此操作，媒体查询只需将第二个元素的

顺序更改为
顺序：-1，如下所示


.nav{
高度：200px；
显示器：flex；
对齐项目：柔性端；
边框：1px纯黑；
}
.一{
背景#5B9BD5；
}
.二{
背景：#FF0000；
}
.分区{
弹性：1；
填充：10px0；
边框：1px纯黑；
保证金：5px；
框大小：边框框；
}
@介质（最大宽度：480px）{
.导航{
弯曲方向：立柱；
对齐项目：正常；
证明内容：柔性端；
}
.分区{
flex:050px；
}
.二{
顺序：-1；
}
}

1.
2.
您可以使用
Flexbox
执行此操作，媒体查询只需将第二个元素的
顺序更改为
顺序：-1，如下所示


.nav{
高度：200px；
显示器：flex；
对齐项目：柔性端；
边框：1px纯黑；
}
.一{
背景#5B9BD5；
}
.二{
背景：#FF0000；
}
.分区{
弹性：1；
填充：10px0；
边框：1px纯黑；
保证金：5px；
框大小：边框框；
}
@介质（最大宽度：480px）{
.导航{
弯曲方向：立柱；
对齐项目：正常；
证明内容：柔性端；
}
.分区{
flex:050px；
}
.二{
顺序：-1；
}
}

1.
2.
您是否尝试更改html代码中DIV的顺序？第1部分在第2部分之前。@SlavenkoMiljic Hi。对问题是，当导航打开时，顺序应该是左侧的DIV 1和右侧的DIV 2。但是当它关闭时，第二分区应该在第一分区之上。。。如果我在代码中更改它，打开的导航中的顺序将不正确..正如Slavenjo指出的，您所要做的就是颠倒div的顺序。div 2仍然在右边，div 1仍然在左边，即使您有div 2 first和div 1 second。您是否尝试更改html代码中div的顺序？第1部分在第2部分之前。@SlavenkoMiljic Hi。对问题是，当导航打开时，顺序应该是左侧的DIV 1和右侧的DIV 2。但是当它关闭时，第二分区应该在第一分区之上。。。如果我在代码中更改它，打开的导航中的顺序将不正确..正如Slavenjo指出的，您所要做的就是颠倒div的顺序。第2部分仍然在右边，第1部分仍然在左边，即使第一部分是第2部分，第1部分是第二部分。如果在colapsed导航中使用“flex direction:column reverse”，它也会起作用。致以最诚挚的问候。如果您在colapsed导航中使用“弯曲方向：柱反向”，它也可以工作。顺致敬意，
<div class="parent">
    <div class="div2">DIV2</div>
    <div class="div1">DIV1</div>
</div>