How to make a specific div go on top of another div-CodePudding

I have two divs. When resizing the browser, div 2 will go on the bottom, and div one will go on the top, something like the image below.

What I want is div 1 to go on the bottom and div 2 go on the top, basically the opposite of what it does. I know I can just put div 2 on the top in the html but I want the div 1 to stay on the left.

Current code:

.div1 {
  width: 55%;
  height: 80vh;
  display: inline-block;
  margin-right: 1.5vh;
  min-width: 50vh;
}

.div2 {
  width: 50vh;
  height: 80vh;
  display: inline-block;
}

<div >
</div>

<div >
</div>

Hope that makes sense, thx to everyone that helps in advance.

CodePudding user response：

The simplest way is to make parent container as display: flex; and use flex-wrap: wrap-reverse;:

.div1 {
  width: 55%;
  height: 80vh;
  display: inline-block;
  margin-right: 1.5vh;
  min-width: 50vh;
  background-color: blue;
}

.div2 {
  width: 50vh;
  height: 80vh;
  display: inline-block;
  background-color: red;
}


.container
{
  display: flex;
  flex-wrap: wrap-reverse;
  /* ignore below */
  resize: both;
  overflow: hidden;
  border: 1px solid black;
  padding: 1em;
}

<div >
<div >
</div>

<div >
</div>
resize me
</div>

CodePudding user response：

You can achieve this by combining two concepts: media queries and flexbox.

I've set the max-width of the screen size that the media query starts applying to 600px, but you can change this to whatever value (min or max) that you want. The switch in how the two divs render when in column-view is handled via flex-direction: column-reverse.

You'll need to wrap your divs in a parent container to apply them:

     .container {
          display: flex;
          flex-direction: row;
        }
    
        @media screen and (max-width: 600px) {
          .container {
            flex-direction: column-reverse;
          }
        }
    
        .div1 {
          width: 55%;
          height: 80vh;
          display: inline-block;
          margin-right: 1.5vh;
          min-width: 50vh;
          background: green;
        }
    
        .div2 {
          width: 50vh;
          height: 80vh;
          display: inline-block;
          background: orange;
        }

  <div >
      <div ></div>
      <div ></div>
    </div>

You can read up on the two concepts I mentioned above in more detail: