Real example: Tree Academy homepage โ€” desktop / tablet / mobile

Same content, three viewports. The toggle decisions: S-1 Hero stack, S-3 Services keep 2-col (cards), S-5 About stack (text). S-8 CTA stack. S-9 Footer auto-stack.

๐Ÿ–ฅ๏ธ Desktop 1280px
3-COL CARDS
Get Started โ†’
S-1 ยท Hero

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources.

S-3 ยท Services

What we offer

๐Ÿ“š

Books

Curated illustrated guides for ages 5โ€“12. Aligned to UK and US curricula.

๐Ÿ“ฐ

News

Latest from the forest โ€” new species, conservation wins, classroom ideas.

๐Ÿ‘ฅ

Team

Botanists, illustrators, educators. Meet the people behind the pages.

S-5 ยท About

About us

Tree Academy started in 2018 with a single book about British oaks...

Today we work with 200+ schools across the UK and the US...

S-8 ยท CTA

Ready to bring trees to your classroom?

Get Started โ†’
๐Ÿ“ฑ Tablet 768px
2-COL CARDS
Get Started
S-1

Explore the World of Trees

Bring nature into the classroom.

S-3

What we offer

๐Ÿ“š

Books

Curated illustrated guides.

๐Ÿ“ฐ

News

Latest from the forest.

๐Ÿ‘ฅ

Team

Botanists, illustrators, educators.

๐ŸŽจ

Resources

Free downloads for classrooms.

S-5

About us

Tree Academy started in 2018...

Today we work with 200+ schools...

S-8

Ready to bring trees to your classroom?

Get Started โ†’
๐Ÿ“ฑ Mobile 390px
PER-SECTION TOGGLE
Get Started
S-1 STACK

Explore Trees

Bring nature into the classroom.

S-3 2-COL โœ“

What we offer

๐Ÿ“š

Books

Curated guides

๐Ÿ“ฐ

News

From the forest

๐Ÿ‘ฅ

Team

Who we are

๐ŸŽจ

Resources

Free downloads

S-5 STACK

About us

Tree Academy started in 2018 with a single book about British oaks.

Today we work with 200+ schools across the UK and US.

S-8

Ready to bring trees to your classroom?

Get Started โ†’

The Tree Academy homepage โ€” what changes per breakpoint:

The toggle per section: S-1, S-5, S-8, S-9 = STACK. S-3 = 2-COL. The badges (top-right of each section) are the live indicator. Operator can flip any of them in the section settings.

Result: the page looks like a designed mobile site, not a desktop one squished down. Cards breathe in 2-up, text reads full-width, CTA stays focused.