To get started, follow the steps below:
- Begin by creating a flex container with a structure that includes two inner containers.
- Within the flex container. The first inner container should contain two blocks, while the second inner container will house the remaining one block.
- For the first block within the first inner container, allocate width percentages suitable for the layout. For instance, consider a larger grid block with a width of 64% and a smaller grid block with a width of 36%
- Access the properties of the first inner container and choose the “Row – Reversed” flex option. This ensures that the central block is shifted to the right within this container on the desktop.
- Choose the ‘Column – Vertical‘ flex option for the first inner container on the Mobile/Tablets. This choice is crucial to shift the central block to the top when displayed on both mobile and Tablets.
