How Can I Reorder Divs Using CSS Flexbox Based on Screen Width?

Change Div Order with CSS, Depending on Device Width

When creating responsive websites, maintaining the desired layout across different devices can be a challenge. One such issue is the rearrangement of divs when the screen size changes. While it's straightforward to stack divs vertically on smaller screens, it can be more complex to order them differently based on the layout.

For example, let's consider a scenario with two columns of divs. On larger screens, divs are displayed horizontally, but when the screen width narrows, they stack vertically. However, we require a specific order for the divs in the vertical layout.

Traditionally, JavaScript would be employed for such tasks. However, in this scenario, JavaScript is not an option. Therefore, we turn to the versatile CSS flexbox spec to achieve our goal.

Using the 'order' and 'flex-flow' properties, we can create a layout that meets our requirements. Note that this solution is supported by all evergreen browsers and IE11, albeit with a vendor prefix for IE10.

In our CSS, we define div properties such as width, height, and inline-block display. We also assign color classes to each div.

Next, we define a media query that activates when the screen width drops below 531px. Within this query, we modify the container's display properties to 'flex' and 'column,' ensuring that the divs stack vertically on narrower screens.

Then, we specify the order in which the divs should appear in the vertical layout. Using the 'order' property, we assign a higher order value to divs that should appear near the top of the vertical stack.

Here's an illustrative example:

.container div {
  width: 100px;
  height: 50px;
  display: inline-block;
}

.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }

@media screen and (max-width: 531px) {
  .container {
    display: flex;
    flex-flow: column;
  }
  .five { order: 1; }
  .four { order: 2; }
  .three { order: 3; }
  .two { order: 4; }
  .one { order: 5; }
}

<div class="container">
  <div class="one">I'm first</div>
  <div class="two">I'm second</div>
  <div class="three">I'm third</div>
  <div class="four">I'm fourth</div>
  <div class="five">I'm fifth</div>
</div>

The above is the detailed content of How Can I Reorder Divs Using CSS Flexbox Based on Screen Width?. For more information, please follow other related articles on the PHP Chinese website!