DIV浮在DIV上方，左侧浮动

Question

嗨我有一个导航div，底部有一个div。这个div还有另外两个div“DIV 1”和“DIV 2”（见图）。现在我在平板设备上关闭导航，所以我会显示包含float的第二个div：正好在包含float：left的第一个div上，就像在图片中一样。我怎样才能做到这一点？现在第一个div超过了第二个。感谢。

Answer 1

您可以使用Flexbox执行此操作，媒体查询只需将第二个元素的order更改为order: -1，此处为Fiddle

.nav {
  height: 200px;
  display: flex;
  align-items: flex-end;
  border: 1px solid black;
}
.one {
  background: #5B9BD5;
}
.two {
  background: #FF0000;
}
.div {
  flex: 1;
  padding: 10px 0;
  border: 1px solid black;
  margin: 5px;
  box-sizing: border-box;
}
@media(max-width: 480px) {
  .nav {
    flex-direction: column;
    align-items: normal;
    justify-content: flex-end;
  }
  .div {
    flex: 0 0 50px;
  }
  .two {
    order: -1;
  }
}

<div class="nav">
  <div class="div one">1</div>
  <div class="div two">2</div>
</div>

Answer 2

您可以将media queries用于此目的。

你可以在某个时刻操纵你的div来改变他们的风格。

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

Answer 3

您可以尝试以下操作以及媒体查询以删除800px处的浮动：

JSFiddle：https://jsfiddle.net/7ws3m9Lx/

CSS：

.div1,.div2 { width: 50%; }
.div1 { float: left; }
.div2 { float: right; }

@media screen and (min-width: 0) and (max-width: 800px){
    .div1,.div2 { float: none; width: 100%; }
}

HTML：

<div class="parent">
    <div class="div2">DIV2</div>
    <div class="div1">DIV1</div>
</div>