DIV with float right over DIV with float left

Question

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.

Answer 1

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> 

Answer 2

You can use media queries for that purpose.

You can just manipulate your divs at some point to change their style.

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

Answer 3

You can try the following, along with media queries to remove the float at 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>