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

CodePudding user response：

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

CodePudding user response：

There might be simpler ways to do this but the following works fine for me.

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>


    <div >
<div >
    A
  </div>

  <div >
    B
  </div>

  <div >
    C
  </div>

</div>

On larger screens, it will be a 3 column grid and on smaller screens, it will be a 2 column grid. since the C block needs to be in the middle I gave it a col-span-2 (it will cover the whole second row) the I sliced it into half and align it to the centre (w-1/2 m-auto).