浮动div从左到右到顶部和底部，其中左div位于底部，而右div位于顶部

Question

I have 2 divs next to each other and on ipad(portrait) i want the right div to display on top of left div.

Code:

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

 <div class="main">
 <div class="both">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
 </div>
 </div>

Css:

.both {
   width: 100%;
   display: -webkit-inline-box;
}

.left-go-bottom, right-go-top {
   height: 769px;
   width: 50%;
   background-color: darkblue;
}

.main {
  display: block;
  width: 100%;
  height: 769px;
}

The first div class .left-go-bottom is first and wil be on the left the second div class right-go-top is second and wil float on right side.

For my media query at the break point i added.

Css:

@media only screen and (max-device-width: 1024px) and 
  (min-device-width: 768px) and (orientation: portrait) {

.left-go-bottom, .right-go-top {
    width: 100%;
    float: left;
    display: block;
 }

}

So it works fine, but the div on the top i need on the bottom and the one currently bottom i need top, i tried floating the top one right and bottom left , did not work, any help please.

Answer 1

you can use display:flex; on .both and then in the media query use flex-direction:column-reverse this will reverse the order of your boxes

i have added background:red to the right-go-top div for example purposes. also changed the media query for the same reason ( it will work the same with your media query )

see snippet below or jsfiddle > jsfiddle flex

let me know if it helps

 .both { width: 100%; display:flex; } .left-go-bottom,.right-go-top { height: 769px; width:50%; } .left-go-bottom{ background-color: darkblue; } .right-go-top{ background-color: red; } @media only screen and (max-width: 768px) { .left-go-bottom, .right-go-top { width: 100%; float: left; display: block; } .both { flex-direction:column-reverse } } 

 <div class="both"> <div class="left-go-bottom"></div> <div class="right-go-top"></div> </div> 

EDIT with new code from OP

OPTION 1 : delete the height from .main . because you have set a fixed height of 769px on the main s content ( right and left div ) so .main will inherit the height from the content .

so it will have an automatic height of 769px when right and left div are on the same line , and will have a height of 769px*2 = 1538 on mobile version . this happens automatically if you don't write a fixed height.

see snippet below with this solution

 .both { width: 100%; display:flex; } .main { display: block; width: 100%; /* height:758px removed */ } .left-go-bottom,.right-go-top { height: 769px; width:50%; } .left-go-bottom{ background-color: darkblue; } .left-go-bottom.green { background:green } .right-go-top{ background-color: red; } .right-go-top.yellow{ background-color: yellow; } @media only screen and (max-width: 768px) { .left-go-bottom, .right-go-top { width: 100%; float: left; display: block; } .both { flex-direction:column-reverse; } } 

 <div class="main"> <div class="both"> <div class="left-go-bottom green"></div> <div class="right-go-top yellow"></div> </div> </div> <div class="main"> <div class="both"> <div class="left-go-bottom"></div> <div class="right-go-top"></div> </div> </div> <div class="main"> <div class="both"> <div class="left-go-bottom green"></div> <div class="right-go-top yellow"></div> </div> </div> 

Option B not recommended . but you can set a fixed height on .main , although it's useless because, as i said in the previous solution, .main inherits its height from the two divs that are inside it and that have fixed height of 769px

but if you really want to. you can set height 769px on desktop version, and 1538px when the divs go on different lines. ( their height combined )

see snippet below :

 .both { width: 100%; display:flex; } .main { display: block; width: 100%; height: 769px; } .left-go-bottom,.right-go-top { height: 769px; width:50%; } .left-go-bottom{ background-color: darkblue; } .left-go-bottom.green { background:green } .right-go-top{ background-color: red; } .right-go-top.yellow{ background-color: yellow; } @media only screen and (max-width: 768px) { .left-go-bottom, .right-go-top { width: 100%; float: left; display: block; } .both { flex-direction:column-reverse; } .main { height: 1538px; /* added */ } } 

 <div class="main"> <div class="both"> <div class="left-go-bottom green"></div> <div class="right-go-top yellow"></div> </div> </div> <div class="main"> <div class="both"> <div class="left-go-bottom"></div> <div class="right-go-top"></div> </div> </div> <div class="main"> <div class="both"> <div class="left-go-bottom green"></div> <div class="right-go-top yellow"></div> </div> </div> 

Answer 2

If they don't contain content that can't be doubled, the simplest solution is to create a copy of the right block and hiding or showing it accordingly.

<div class="both">
    <div class="right-go-top show-only-on-iPad-portrait"></div>
    <div class="left-go-bottom"></div>
    <div class="right-go-top hide-on-iPad-portrait"></div>
</div>


<style>
.show-only-on-iPad-portrait {
    display:none;
}
.hide-on-iPad-portrait {
    display:block;
}

@media only screen and (max-device-width: 1024px) and 
  (min-device-width: 768px) and (orientation: portrait) {

.show-only-on-iPad-portrait {
    display:block;
}
.hide-on-iPad-portrait {
    display:none;
}

}
</style>

Answer 3

This is pretty ugly because it uses absolute position and this is not responsive, but this does the staff

@media only screen and (max-device-width: 1024px) and 
  (min-device-width: 768px) and (orientation: portrait) {

  .left-go-bottom, .right-go-top {
      width: 100%;
      float: left;
      display: block;
  }

  .left-go-bottom{
      top: 769px;
      position: absolute;
  }

  .right-go-top{
      position: absolute;
      top: 0px; 
  }
}

Answer 4

Thanks to @MihaiT for the help my problem resolved.

This is my answer that works.

code:

 <div class="main">
  <div class="both">
    <div class="left-go-bottom"></div>
    <div class="right-go-top"></div>
  </div>
 </div>

 <div class="main">
  <div class="both unique-flex">
   <div class="left-go-bottom"></div>
   <div class="right-go-top"></div>
  </div>
 </div>

 <div class="main">
  <div class="both">
    <div class="left-go-bottom"></div>
    <div class="right-go-top"></div>
  </div>
 </div>

css:

.main{
    display: block;
    width: 100%;
    height: 769px;
}

.both {
   width: 100%;
   display:-webkit-inline-box;
}

.left-go-bottom,.right-go-top  {
    height: 769px;
    width:50%;
 }


 @media only screen and (max-device-width: 1024px) and
 (min-device-width: 768px) and (orientation: portrait) {

  .left-go-bottom, .right-go-top {
    width: 100%;
    float: left;
    display: block;
  }

  .both {
    display:block;
  }

  .main {
    float: left;
    display: inline-table;
   }

  div.both.unique-flex {
   display: flex;
   flex-direction: column-reverse;
  }
 }

As you can see i made the blocks i want to switch unique to them self and the one on top and bottom used display:block.