Flexbox: Reordering Content

Topics covered in this Web Development tutorial:

Changing the Order of Flex Items, Positive vs. Negative Order Values

Exercise Preview

Exercise Overview

In this exercise you’ll learn now to change the order of flex items, which can change across various screens sizes!

Getting Started

1. In your code editor, close any files you may have open.
2. For this exercise we’ll be working with the Flexbox Reorder Content folder located in Desktop > Class Files > yourname-Flexbox Grid Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).
3. Open index.html from the Flexbox Reorder Content folder.

4. Preview index.html in a browser.

   • Resize the window to be narrow, so you see the navbar and footer items stack (instead of being in a single row).
   • The order of items in the navbar and footer are different than in previous exercises. We changed the order to be the ideal order, which is correct on mobile.
   • Make the window wider, so you see the navbar and footer items as a single row.
   • We’re going to change the order of some of the elements on wider screens.

5. Leave index.html open in the browser as you work, so you can reload the page to see the code changes you’ll make.

Reordering Content in the Footer (Positive vs. Negative Order Values)

Before we start, keep in mind that the default order of all flex items is 0.

1. Switch back to your code editor.
2. Open main.css from the css folder (in the Flexbox Reorder Content folder).

3. In the min-width: 571px media query, below the footer rule add the following new rule:

   footer .social {
      order: -1;
   }
   

   NOTE: The order property does not work on all elements. The reason it works here, is because the .social div is a flex item (because we set the footer to display: flex).

4. Save the file, and reload the page in your browser.

   • The social div has moved to the start, because -1 is less than the default 0.
5. Return to your code editor.

6. In the min-width: 571px media query’s footer .social rule, change the order to 1:

   footer .social {
      order: 1;
   }
   

7. Save the file, and reload the page in your browser.

   • Now the social div has moved to the end, because 1 is greater than 0.

Reordering Content in the Navbar

1. Return to your code editor.

2. In the min-width: 571px media query, below the .navbar .logo rule add the following new rule:

   .navbar .signup {
      order: 1;
   }
   

3. Save the file, and reload the page in your browser.

   • Sign Up should be all the way on the right, because 1 is greater than the default 0.
   • While this position is where we want it, what if we wanted it to be between Excursions and About? The logo would be the first item, Excursions would be second, but setting Sign Up to 3 won’t make it third in the current group, just like setting order to 1 didn’t make it first. That’s because the default order of flex items is 0. Let’s change that for the nav.
4. Return to your code editor.

5. In the min-width: 571px media query, above the .navbar .logo rule add the following new rule:

   .navbar li {
      order: 5;
   }
   

   NOTE: Giving it a higher number ensures we have enough low numbers to order the first items the way we want.

6. In the min-width: 571px media query’s .navbar .logo rule, add the following bold code:

   .navbar .logo {
      order: 1;
      margin-right: auto;
   }
   

7. In the min-width: 571px media query, below the .navbar .logo rule add the following new rule:

   .navbar .excursions {
      order: 2;
   }
   

8. In the min-width: 571px media query, in the .navbar .signup rule change the order to 3:

   .navbar .signup {
      order: 3;
   }
   

9. Save the file, and reload the page in your browser.

   • The order on wider screens should now be Excursions, Sign Up, About, Contact.
   • Resize the browser window so you see that all the order changes only apply to the desktop size (because we put them in a media query) and the mobile still retains the original order.