# How to reverse the order of vertically stacked divs? \[resolved\] **URL:** \ **Category:** Beginners\ **Created:** [March 21, 2022, 9:32am UTC](https://forum.pinegrow.com/t/how-to-reverse-the-order-of-vertically-stacked-divs-resolved/6407 "2022-03-21T09:32:30Z")\ **Posts on this page:** 2\ **Page:** 1

**Author:** ![dculp](https://avatars.discourse-cdn.com/v4/letter/d/e47c2d/32.png) [@dculp](https://forum.pinegrow.com/u/dculp)\ **Post date:** [March 21, 2022, 9:32am UTC](https://forum.pinegrow.com/t/how-to-reverse-the-order-of-vertically-stacked-divs-resolved/6407/1 "2022-03-21T09:32:30Z")

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](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/b/bc77a1ec047ef89a919a6a73a8fadb78dcc32d6d.png) 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 ======================================== ```auto

Hello World

Main

Click on the Contents menu tree on the left (or below) until you find your desired topic.

Other instructions -- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

``` ===== Resolved ======================================== ```auto

Hello World

Main

``` ---

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\ **Post date:** [March 21, 2022, 11:17am UTC](https://forum.pinegrow.com/t/how-to-reverse-the-order-of-vertically-stacked-divs-resolved/6407/2 "2022-03-21T11:17:27Z")

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. ```auto @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