Ylama Ylama - 1 month ago 5
CSS Question

Floating div from left to right to top and bottom where left div sit bottom and right div top

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

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 mains 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>