Stacking content for small screens

The most fundamental responsive pattern is collapsing a multi-column desktop layout into a single-column stack on mobile. Site Designer handles this through breakpoint mode, where you adjust styles for smaller screen widths without touching your desktop layout.

The core pattern

• Desktop: side-by-side columns (two, three, or more).
• Mobile: a single vertical column — items stack one on top of the other.

The transition happens at a breakpoint you define, usually somewhere between 480 px and 768 px depending on your content.

Stacking a Flexbox layout

By default, a flex row (flex-direction: row) arranges items horizontally. At a mobile breakpoint, switch the direction to column.

1. Click the breakpoint width slider in the toolbar and drag it to your target mobile width (for example, 480 px), or click a preset breakpoint button.
2. Select the flex container on the canvas.
3. In the Style pane, find Flex Direction and change it from row to column.
4. Adjust any gap, padding, or width values that need to change at this breakpoint.
5. Return the slider to full width to confirm the desktop layout is unchanged.

Stacking a CSS Grid layout

A multi-column Grid layout collapses to a single column by redefining grid-template-columns to a single 1fr track.

1. Enter the target mobile breakpoint using the width slider.
2. Select the grid container.
3. In the Style pane, update Grid Template Columns from (for example) 1fr 1fr 1fr to 1fr.
4. Review row heights — rows that were sized to specific content may need adjustment when stacked.

All grid items reflow into a single column in DOM order.

Stacking with framework grids

Both Foundation and Bootstrap include small-screen column classes that make stacking declarative — no custom CSS required.

Foundation 6 — Use .small-12 on every column:

<div class="small-12 medium-6 large-4 columns">Card</div>

At the small breakpoint (under 640 px), each column spans the full 12-unit width, stacking vertically.

Bootstrap 4/5 — Use .col-12 as the base and add larger-breakpoint column classes:

<div class="col-12 col-md-6 col-lg-4">Card</div>

At the md breakpoint (768 px and above), it switches from full-width to a half-width column.

DOM order and stacking

When items stack, they flow in DOM order — the same sequence they appear in the HTML source. Before you finalize your layout, check that this order makes sense on mobile:

• The most important content should come first.
• A sidebar that appears on the right on desktop will appear below the main content when stacked — that is usually correct behavior.
• If the stacked order feels wrong, adjust the DOM order rather than using visual reordering tricks, which can harm keyboard and screen reader accessibility.