Responsiveness - How to go from 3 horizontal blocks to 3 vertical blocks?

Need help Responsiveness
1

Hi everybody,

I’m new on Bubble and I have been struggling to find how to set up responsive groups.
I want to go from three horizontal blocks to three vertical blocks, without the intermediate step.

Step 1

Step1
Step1785×245 3.52 KB

Step 3

Step3
Step3358×770 3.9 KB

Step 2 I want to skip

Step2
Step2512×508 4.12 KB

Has someone found a way to do it without creating multiple groups of blocks ?
Should I look at CSS Flexbox solutions ?

Thank you !

1 Like
2

Hi @Bohemond

I know that Flexbox can do it but haven’t had luck integrating this into Bubble’s responsive engine . Here’s an example of the “flex-direction” column/row CSS: https://www.w3schools.com/code/tryit.asp?filename=GLL9WXIS4DVQ

Take a look at this post where Flexbox does something else (but related).

Do you know anything about Flexbox and its “flex-direction: column;” attribute?

3

Okay @Bohemond , here’s an example that doesn’t fully work, but is getting closer. Unfortunately, I don’t know why it doesn’t work, or even how I got this much to work. Anyone with some top-level CSS skills want to chime in?

Also adding in @eli from whom I got the structure/approach in his excellent post.

A few things to point out:

  1. Designer has boxes in Red, Green, Blue order (left to right).
  2. Preview @ ≥534px has same Red, Green, Blue order.
  3. Preview @ <534px has new Red, Blue, Green order.
  4. This order remains as you reduce page width until 303px.
  5. Preview @ 302px drops Blue to new 2nd row but is centred.
  6. Preview @ ≤301px shows correct vertical alignment as all items are in 1 column.

Designer and Preview are available.