带右浮点的DIV带左浮点的DIV

Question

嗨，我有一个导航div，其底部有一个div。 该div还有另外两个div“ DIV 1”和“ DIV 2”（参见图片）。 现在，我在平板电脑设备上关闭了导航，因此我将显示包含float：的第二个div，位于包含float：left的第一个div上方，如图所示。 我怎样才能做到这一点？ 现在，第一个div在第二个上。 谢谢。

Answer 1

您可以使用Flexbox进行此Flexbox ，媒体查询只需将第二个元素的order: -1更改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

您可以为此使用媒体查询 。

您可以只在某些时候操纵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>