Switching the order of block elements with CSS

css

responsive-design

flexbox

css-properties

byNikita Barsukov·Oct 11, 2024

Want to mix things up? You can change the visual order of blocks with CSS Flexbox. Set the parent to display: flex; and assign order to each child:

.container {
  display: flex; /* Hey, are we ready for display? */
}

.block1 {
  order: 2; /* Hey Block1, you're up second */
}

.block2 {
  order: 1; /* Block2, you're stealing the show */
}

With order, CSS ensures the sequence of their display, irrespective of their HTML hierarchy. It's great when you wish to dynamically prioritize content, particularly beneficial for those fiddling phones.

Harnessing media queries

CSS media queries, the superheroes of screen adaptability, help tailor dynamic arrangements suited to varying screen widths.

@media (max-width: 600px) {
  .container {
    flex-direction: column; /* Vertical’s the way to go for small screens */
  }

  .block1, .block2 {
    order: 1; /* Shuffle order for smaller screens */
  }
}

Utilizing media queries, blocks catwalk their way into optimal positions on any device, boosting user experience manifold.

Being progressive with enhancements

Choose progressive enhancement for a broader reach. Use -webkit-box and -moz-box vendor prefixes for that stubborn, older-gen tech, along with the avant-garde Flexbox.

.container {
  display: -webkit-box; /* Good old safari and chrome */
  display: -moz-box; /* Catching the Firefox */
  display: flex; /* Joining the flex gang */
  flex-wrap: wrap; /* All aboard the wrap bus! */
}

Old or new, each browser deserves the best. A progressively enhanced layout ensures that.

Flexing responsiveness for layouts

Responsive layouts are like water—they adapt to their container. And with flex properties, your blocks move and grow without overlap.

.block {
  flex: 1;
  padding: 10px; /* Breathe easy with some padding */
}

Say no to the rigidity of absolute positioning—flex layouts preserve document flow, giving your blocks the space they deserve!

Playing fair with content semantics

When you're playing with the visual order, remember the content semantics. The switch shouldn’t disorient readers or disrupt tabbed navigation—accessibility matters.

/* Surprise order change, yet semantics stay */
@media (min-width: 768px) {
  .container {
    display: flex; /* Flex them muscles */
    flexDirection: row; /* Off we row */
  }

  .nav {
    order: 2; /* Came later, yet won the race */
  }

  .main-content {
    order: 1; /* First to the feast */
  }
}

A visually appealing layout shouldn’t scar the semantic flow or the content’s navigational logic.

Partnering with other CSS properties

Flexbox doesn’t perform solo—it loves company. Team it up with the scaleY(-1) transform property, to literally flip block elements without changing the order.

.flipped-container {
  display: flex;
  transform: scaleY(-1); /* Flip-flop with the transform */
}

.flipped-container > * {
  transform: scaleY(-1); /* All children do the flip-flop */
}