Flex columns on 2/5+1/5+1/5+1/5

Hey helban,
Thank you for your patience and the link to your page, with the way that flex works with row or column reverse, or even order, the rows you are creating need to be wrapped in a container so the inner elements can be ordered or reversed. For this reason, we have the Grid Row element, to use this in your situation you would add the Grid Row and 4 cells:

and then use the Set Cell Size option to set your 2/5+1/5+1/5+1/5

and then add your inner cell content

for this example I will clone the Grid Row 3 times and use the Set Cell Size option to alternate the rows for desktop as in your example 1/5+1/5+1/5+2/5, then for the mobile css it will be easier to add custom IDs to each of the Grid Rows in the Advanced Tab > Developer Settings

I recommend using lower case letters only and each ID must be different and unique to your whole site, for this example I’m using one, two, three.

Then for the mobile flex column reverse of this one row you would use this css in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

@media only screen and (max-width: 767px) { 
  #two {
    display: flex;
    flex-direction: column-reverse;
  }
  }

I hope this helps.

Best regards,
Mike

Hi,

Thanks for helping out @guenni007 :-)

Best regards,
Rikard