How to make responsive layout, where element should appear between two others?

Issue

I have 2 types of elements:

1. Type "A" - text block
2. Type "B" - graphical block

I need to make responsive layout, where on small resolution it should look like this:

"A" "A"
   "B"

and on higher resolution it should look like this:

"A" "B" "A"

Do you have any ideas how to make or approach this task? I am using tailwindcss, but it's okay to use pure css

Solution

You can use display: flex on the parent, and then give the children an order. You can then change the order based on screenwith with media-queries.

.a {
  order: 1;
}
.b {
  order: 2;
}

@media screen and (min-width: 600px) {
  .b {
    order: 1;
  }
}

In addition to reversing the order in which flex items are visually displayed, you can target individual items and change where they appear in the visual order with the order property.

The order property is designed to lay the items out in ordinal groups. What this means is that items are assigned an integer that represents their group. The items are then placed in the visual order according to that integer, lowest values first. If more than one item has the same integer value, then within that group the items are laid out as per source order.

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#the_order_property

Answered By - Dennis van de Hoef