Flexbox: Reordering Content

Topics Covered in This Web Development Tutorial:

Mastering Flexbox Order Property: Changing the Order of Flex Items, Understanding Positive vs. Negative Order Values

Exercise Preview

Exercise Overview

In this hands-on exercise, you'll master one of CSS Flexbox's most powerful features: the ability to visually reorder content without touching your HTML structure. This technique is essential for responsive design, allowing you to create different layouts across screen sizes while maintaining semantic HTML order. You'll learn how to strategically use positive and negative order values to achieve pixel-perfect layouts that adapt seamlessly to any device.

Getting Started

Let's set up your development environment and examine the starting point for this exercise.

1. In your code editor, close any files you may have open to start with a clean workspace.
2. For this exercise we'll be working with the Flexbox Reorder Content folder located in Desktop > Class Files > yourname-Flexbox Grid Class. If your code editor supports project folders (like Visual Studio Code, WebStorm, or Sublime Text), open the entire folder for easier file navigation.
3. Open index.html from the Flexbox Reorder Content folder.

4. Preview index.html in a browser and examine the responsive behavior:

   • Resize the window to be narrow (mobile width) to see how the navbar and footer items stack vertically instead of displaying in a single row.
   • Notice that the order of items in both the navbar and footer differs from previous exercises. We've intentionally structured the HTML in the optimal semantic order, which displays correctly on mobile devices.
   • Expand the window to desktop width to see the navbar and footer items display as horizontal rows.
   • We'll be strategically reordering some elements to optimize the desktop layout while preserving the mobile experience.

5. Keep index.html open in your browser as you work—you'll reload the page frequently to observe your CSS changes in real-time.

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

Now we'll explore how flexbox order values work. Understanding this concept is crucial: the default order value for all flex items is 0. This means any negative value moves an item toward the beginning, while positive values move items toward the end.

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 only works on flex items. This works here because the .social div is a direct child of the footer, which has display: flex applied.

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

   • The social div now appears first because -1 is less than the default value of 0. Negative values are powerful for moving important elements to prominent positions without restructuring HTML.
5. Return to your code editor to experiment with positive values.

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.

   • The social div has moved to the end because 1 is greater than the default 0. This demonstrates how positive values push elements toward the end of the flex container.

Reordering Content in the Navbar

Next, we'll tackle a more complex reordering scenario in the navigation. This section demonstrates how to strategically assign order values when you need precise control over multiple elements.

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.

   • The Sign Up button now appears at the far right because 1 is greater than the default 0.
   • This positioning works for our current needs, but what if we wanted Sign Up to appear between Excursions and About? Simply setting order to 3 won't make it third, because the other items still have the default order of 0. We need a more systematic approach.
4. Return to your code editor to implement a comprehensive ordering system.

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

   .navbar li {
      order: 5;
   }

   NOTE: By assigning a higher default number (5), we create room for lower numbers (1-4) to control the order of specific elements. This is a professional technique for maintaining flexible, scalable CSS.

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 navigation order on wider screens should now display as: Logo, Excursions, Sign Up, About, Contact. This creates an optimal user flow for desktop users.
   • Test the responsive behavior by resizing your browser window. Verify that all order changes only apply at desktop width (thanks to the media query) while mobile maintains the original, semantically logical order.

You've now mastered the fundamentals of flexbox content reordering. This technique is invaluable for creating responsive designs that prioritize user experience across all devices while maintaining clean, semantic HTML structure. The ability to reorder content with CSS alone gives you tremendous flexibility in responsive design without compromising accessibility or SEO performance.