How Can I Swap the Order of Two DIVs Using Only CSS?

Swapping DIV Positions Using Pure CSS

In responsive design, arranging elements dynamically can be crucial. If you seek a way to swap the positions of two divs purely through CSS, here's a solution inspired by a similar query:

Original Structure:

<div>

Desired Outcome:

Have the "second_div" appear before the "first_div" without altering the HTML.

Solution:

Implement the following media query to target the necessary context:

@media (max-width: 30em) {
  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .container .first_div {
    order: 2;
  }

  .container .second_div {
    order: 1;
  }
}

Explanation:

• The media query targets devices with a maximum width of 30em, effectively enabling responsive behavior.
• Within the container element, we set the display to 'flex', which supports the arrangement of elements horizontally.
• We specify flex-direction as 'column' to align the divs vertically.
• align-items: flex-start; ensures the elements start from the beginning of the container.
• The key to swapping the div positions is through the 'order' property. By setting order: 2; on .first_div, we instruct the browser to display it after any other elements with a higher order. Conversely, order: 1; on .second_div positions it before the .first_div.

This approach allows for a seamless swap of DIV positions using only CSS, effectively addressing the initial query.

The above is the detailed content of How Can I Swap the Order of Two DIVs Using Only CSS?. For more information, please follow other related articles on the PHP Chinese website!