Order of div's responsive

Design help General
1

Hi guys,

I have a question about the responsive behaviour of certain div’s in a new website. I recreated this specific section in a new project (see link).

As you can see, in desktop mode, you have a red div in the middle, a blue div on the left and another blue div on the right.

In tablet mode I’d like to have the two blue div’s next to eachother, and the red one on top of them … But I have no clue how to achieve this. The first blue div always stays on top of (or next to) the red one.

Is there someone who can tell me how to solve this?

Thank you very much!

Here is my public share link: https://preview.webflow.com/preview/try-out-62917e?preview=753f7544cafa18e73754026a2ab9ab18

2

Hi, @Martino

You can do this by using flexbox settings:

  1. set display: flex to the Main div
  2. on the tablet view also add settings “Wrap children” to the Main div
  3. on the tablet view set Center div (red) order: first (in flex child settings)

Cheers,
Anna

3

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.