About responsive divs

[armpouniotis]

Hi there !

I want the 1st div to be on top of the 2nd div (when screensize is less than 600px):

<div class="main">
    <div class="mainLeft"><?php $eDoc->component(); ?></div>
    <div class="mainRight"><?php $eDoc->modules('right'); ?></div>
</div>

Css:

.main{
width: 100%;
float: left}
   
.mainLeft{
   width: 80%;
   float: left;}

.mainRight{
   width: 20%;
   float: left;}

@media screen and (max-width: 600px) {
.mainLeft {
    width: 100%;
  }
.mainRight {
    width: 100%;
  }
}

Unfortunately, nothing happens

Any help ?
Christos

[webgift]

You could use a container (that contains these two divs) with display flex
and order these items using order property.
See this page: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[armpouniotis]

Yes !

thank you very much !

Christos