CODEWITHSUNDEEP
htmlcss
Krzheski
Krzheski

Reputation: 31

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

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

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 class="div1">
</div>

<div class="div2">
</div>

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

Upvotes: 0

Views: 56

Answers (2)

Marco
Marco

Reputation: 512

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 class="container">
      <div class="div1"></div>
      <div class="div2"></div>
    </div>

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

Upvotes: 1

vanowm
vanowm

Reputation: 10221

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 class="container">
<div class="div1">
</div>

<div class="div2">
</div>
resize me
</div>

Upvotes: 2

Related Questions