CODEWITHSUNDEEP
htmlcssmedia-queries
Chris
Chris

Reputation: 3129

Div's stack on top of each other, just not in right order

I have a couple divs, placed side by side and using a media query to stack them, which they do stack but I need the yellow one to be on top and the blue below it. So opposite of what you see when the script is ran and not sure on how to do it.

#wrapper {
    width:1000px;
}
#mydivLeft {
    background:blue;
    height:250px;
    width:50%;
    float:left;
}

#mydivRight {
    background:yellow;
    height:250px;
    width:50%;
    float:right;
}

@media only screen and (max-width:768px){
    #wrapper {
        width:100%;
    }

    #mydivRight, #mydivLeft {
        display:block;
        float:none;
        width:100%;
    }

}
<body>
    <div id="wrapper">
        <div id="mydivLeft">
        </div>
        <div id="mydivRight">
        </div>
    </div>
</body>

Upvotes: 1

Views: 49

Answers (3)

Michael Coker
Michael Coker

Reputation: 53664

You can just reverse the order of the divs in the HTML to be whatever order you want them to be.

#wrapper {
    width:1000px;
}
#mydivLeft {
    background:blue;
    height:250px;
    width:50%;
    float:left;
}

#mydivRight {
    background:yellow;
    height:250px;
    width:50%;
    float:right;
}

@media only screen and (max-width:768px){
    #wrapper {
        width:100%;
    }

    #mydivRight, #mydivLeft {
        display:block;
        float:none;
        width:100%;
    }

}
<div id="wrapper">
  <div id="mydivRight">
  </div>
  <div id="mydivLeft">
  </div>
</div>

Alternatively, a more complicated solution is to use flexbox, and use the order property or flex-direction: column-reverse; to re-order the flex children.

#wrapper {
  width: 1000px;
  display: flex;
}

#wrapper > div {
  width: 50%;
  height: 250px;
}

#mydivLeft {
  background: blue;
}

#mydivRight {
  background: yellow;
}

@media only screen and (max-width:768px) {
  #wrapper {
    width: auto;
    flex-direction: column-reverse;
  }
  #wrapper > div {
    width: auto;
  }
}
<div id="wrapper">
  <div id="mydivLeft">
  </div>
  <div id="mydivRight">
  </div>
</div>

Upvotes: 0

Stickers
Stickers

Reputation: 78676

You can use flexbox layout. By default the flex-direction is row, in the media queries change it to column-reverse.

#wrapper {
  max-width: 1000px;
  display: flex;
}
#mydivLeft, #mydivRight {
  flex: 1;
  height: 250px;
}
#mydivLeft {
  background: blue;
}
#mydivRight {
  background: yellow;
}
@media only screen and (max-width: 768px) {
  #wrapper {
    flex-direction: column-reverse;
  }
}
<div id="wrapper">
  <div id="mydivLeft"></div>
  <div id="mydivRight"></div>
</div>

Upvotes: 2

dippas
dippas

Reputation: 60543

you can use flexbox using order to reverse the order of how the elements are stacked

#wrapper {
  width: 1000px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  height: 250px;
}
#wrapper div {
  flex: 1;
}
#mydivLeft {
  background: blue;
}
#mydivRight {
  background: yellow;
}
@media only screen and (max-width: 768px) {
  #wrapper div {
    flex: 0 100%
  }
  #mydivRight {
    order: -1
  }
}
<body>
  <div id="wrapper">
    <div id="mydivLeft">
    </div>
    <div id="mydivRight">
    </div>
  </div>
</body>

Upvotes: 2

Related Questions