MrBuggy MrBuggy - 6 months ago 12
HTML Question

DIV with float right over DIV with float left

Hi I have a navigation div, which has a div on the bottom of it. This div has two other divs "DIV 1" and "DIV 2" (see on picture). Now I the navigation is closed on a tablet device, so I would show the second div which contains float: right over the first div which contains float: left, like in the picture. How can I do this? Now the first div is over the second. Thanks.

enter image description here

Answer

You can do this with Flexbox and media queries just change order of second element to order: -1 , here is 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>

Comments