Divs are piling up on one another, but they're not in the correct sequence

Question

Divs are piling up on one another, but they're not in the correct sequence

Currently, I have two divs placed side by side and utilizing a media query to stack them. However, my goal is to have the yellow div on top with the blue div below it once the script is executed. Unfortunately, I am unsure of how to achieve this.

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

html css media-queries

Answer 1

Answer №1

You have the ability to utilize flexbox and the order property to rearrange how elements are displayed

#container {
  width: 1000px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  height: 250px;
}
#container div {
  flex: 1;
}
#itemLeft {
  background: blue;
}
#itemRight {
  background: yellow;
}
@media only screen and (max-width: 768px) {
  #container div {
    flex: 0 100%
  }
  #itemRight {
    order: -1
  }
}

<body>
  <div id="container">
    <div id="itemLeft">
    </div>
    <div id="itemRight">
    </div>
  </div>
</body>

Answer 2

You have the ability to utilize flexbox and the order property to rearrange how elements are displayed

#container {
  width: 1000px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  height: 250px;
}
#container div {
  flex: 1;
}
#itemLeft {
  background: blue;
}
#itemRight {
  background: yellow;
}
@media only screen and (max-width: 768px) {
  #container div {
    flex: 0 100%
  }
  #itemRight {
    order: -1
  }
}

<body>
  <div id="container">
    <div id="itemLeft">
    </div>
    <div id="itemRight">
    </div>
  </div>
</body>

Answer 3

Answer №2

To create a responsive layout, consider utilizing flexbox. By default, the flex-direction property is set to row, but in your media queries you can adjust 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>

Answer 4

To create a responsive layout, consider utilizing flexbox. By default, the flex-direction property is set to row, but in your media queries you can adjust 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>

Answer 5

Answer №3

You have the flexibility to rearrange the divs in your HTML code as you see fit.

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

For a more intricate approach, consider utilizing flexbox with properties like order or flex-direction: column-reverse; to modify the order of the flexible container's 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>

Answer 6

You have the flexibility to rearrange the divs in your HTML code as you see fit.

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

For a more intricate approach, consider utilizing flexbox with properties like order or flex-direction: column-reverse; to modify the order of the flexible container's 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>

Divs are piling up on one another, but they're not in the correct sequence

Answer №1

Answer №2

Answer №3

Similar questions

Background image positioned behind a carousel

Retrieve webpage using HTML stored in web storage

The background color is showing the wrong shade

Detecting file corruption from a form-based web page file upload (using input type="file")

Issue with Table Element's Full Width Within Parent Element

Tips for positioning your side navigation menu parallel to the page edge

Video background not playing on Bootstrap 5 Jumbotron

Is it possible to adjust the positioning of this navigation style?

Are you familiar with PowerShell and its innovative modular GUI capabilities?

Tips for fixed positioning of a div on a webpage without being affected by the Windows logo shortcut keys + Left/Right arrow

How can I attach a cookie to a div that becomes visible after a few seconds of video playback?

A tutorial on how to create the appearance of disabled buttons that look the same as enabled buttons through the use

Adjust image width in column

Seems like JavaScript's .active functionality is failing to function properly in my case

The JSON ticker for BTC/LTC has stopped functioning

Tips on personalizing the DateTimePicker component from Material-UI

Every time I attempt to visit my website on a mobile device, it seems to appear larger than normal, as

Arranging elements within a complex div structure

Is there a way to tally up the number of green items and display a <p> tag when every item has been marked green?

Eliminate the custom button feature from the Datatable