How to reverse the order of vertically stacked divs? [resolved]

Beginners
1

In a normal wide layout, I have a menu on the left (div #1) and in-line “main” at the right (div #2). “main” gives some instruction for using the menu. When the device screen narrows below 600px, the two divs become stacked vertically. This is illustrated below (ignore the text “Contains an Image”).

image
image615×504 26.8 KB

Since div #2 has instructions about div #1, it should be placed above div #1 when the divs are stacked. However, I can’t figure out how to reverse the default stacking order.

Edit – See the “Resolved” code at bottom. There, I added a .content div with display: flex;. Then see @media where content has flex-direction: column; and main has order: -1;.

See discussion –

Thanks,
Don C.

===== Original ========================================

<!-- Adapted from https://www.w3schools.com/html/html_responsive.asp (see "Media Queries") -->
<!-- responsive_10a.html -->

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
* {
  box-sizing: border-box;
}

.menu {
  float: left;
/*  width: 20%; */
  width: 150px;  
  text-align: center;
  background-color: cyan;
}

.menu a {
  background-color: #e5e5e5;
  padding: 8px;
  margin-top: 7px;
  display: block;
  width: 100%;
  color: black;
}

.main {
  float: left;
  width: calc(100% - 150px);
  padding: 0 20px;
  background-color: yellow;
}

.right {
  background-color: #e5e5e5;
  float: left;
  width: 20%;
  padding: 15px;
  margin-top: 7px;
  text-align: center;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
  .main, .right, .menu {
    width: 100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
  <h1>Hello World</h1>
</div>

<div style="overflow:auto">

  <div class="menu">
    <a href="#">Menu - Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>

  <div class="main">
    <h2>Main</h2>
    <p>Click on the Contents menu tree on the left (or below) until you find your desired topic. <br/><br/>
    Other instructions -- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

<!--
  <div class="right">
    <h2>Right</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
-->

</div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>

</body>
</html>

===== Resolved ========================================

<!-- Adapted from https://www.w3schools.com/html/html_responsive.asp (see "Media Queries") -->
<!-- responsive_stacked_10a.html -->

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
* {
  box-sizing: border-box;
}

.content {
  display: flex; 
  background-color: pink;
}

.menu {
  float: left;
/*  width: 20%; */
  width: 150px;  
  text-align: center;
  background-color: cyan;
}

.menu a {
  background-color: #e5e5e5;
  padding: 8px;
  margin-top: 7px;
  display: block;
  width: 100%;
  color: black;
}

.main {
  float: left;
  width: calc(100% - 150px);
  padding: 0 20px;
  background-color: yellow;
}

.right {
  background-color: #e5e5e5;
  float: left;
  width: 20%;
  padding: 15px;
  margin-top: 7px;
  text-align: center;
}

@media only screen and (max-width: 620px) {
  /* For mobile phones: */
 .content {
    flex-direction: column;
  }

  .content, .main {
    width: 100%;
  }

  .main {
    order: -1; /* top of stack priority */
  }

  .menu {
    width: 100%; /* might set narrower than content or main */
  }
}

</style>
</head>
<body style="font-family:Verdana;color:#aaaaaa;">

<div style="background-color:#e5e5e5;padding:15px;text-align:center;">
  <h1>Hello World</h1>
</div>

<div class="content" style="overflow:auto">

  <div class="menu">
    <a href="#">Menu - Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
  </div>

  <div class="main">
    <h2>Main</h2>
    <p>Click on the Contents menu tree on the left (or below) until you find your desired topic. <br/><br/>
    Other instructions -- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
  </div>

<!--
  <div class="right">
    <h2>Right</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  </div>
-->

</div>

<div style="background-color:#e5e5e5;text-align:center;padding:10px;margin-top:7px;">© copyright w3schools.com</div>

</body>
</html>
2

Hi @dculp,
In past years this would have been a PITA, but now there is flexbox and grid! Your HTML is set-up well for this. Just target the div wrapping the two where you want to change stacking. Since you didn’t have a class on that div I used an nth-child pseudo-class.

@media (max-width: 620px) {
  body>div:nth-child(2) {
    display: flex;
    flex-direction: column-reverse;
  }
}

That CSS will work nicely for just two divs in the outer wrapper. If you have more, change the column-reverse to just column. Then in your media query add order: {number} to each of the inner divs, where the number is 1 for the first in the stack, 2 the second, and so on.
Cheers,
Bob