Push and pull techniques

Sometimes your desired visual order differs from the ideal reading order in the HTML source. Push and pull techniques let you separate these two concerns — placing elements visually wherever you need them while keeping the DOM structure logical.

The source order problem

HTML renders elements in the order they appear in the document. Search engines and screen readers also consume content in DOM order. This means your HTML order should reflect the logical reading sequence — usually: heading, then main content, then secondary content.

But visual design often conflicts with that. For example, you might want a sidebar to appear on the left visually, even though the main content should come first in the DOM for accessibility reasons.

Flexbox order property

The order property accepts an integer and controls the visual position of a flex item within its container. Lower numbers appear earlier.

.item-a { order: 2; } /* appears second visually */
.item-b { order: 1; } /* appears first visually */

Default order for all items is 0. Items with the same order value fall back to DOM order. Negative values are valid and place items before those at 0.

In Site Designer: select the flex item → Style pane → Flex Item section → Order field.

CSS Grid placement

CSS Grid is the most powerful approach. You can place any item in any cell regardless of where it appears in the DOM.

.sidebar  { grid-column: 1; grid-row: 1; } /* left column */
.main     { grid-column: 2; grid-row: 1; } /* right column */

Even if .main comes before .sidebar in the HTML (correct reading order), the grid places them visually left and right respectively.

In Site Designer: use named grid areas or the column/row placement controls in the Style pane under Grid Item.

Framework push/pull classes

If you are using Foundation or Bootstrap, each framework provides utility classes for reordering columns within its grid system.

Foundation 6

<div class="small-12 medium-push-6 large-push-4 columns">Main content</div>
<div class="small-12 medium-pull-6 large-pull-8 columns">Sidebar</div>

.push-N shifts a column N positions to the right; .pull-N shifts it left.

Bootstrap 4/5

<div class="col-12 col-md-8 order-md-2">Main content</div>
<div class="col-12 col-md-4 order-md-1">Sidebar</div>

Bootstrap’s .order-* utilities (including responsive variants like .order-md-1) control visual order per breakpoint.

Accessibility note

The safest approach: keep DOM order and visual order the same whenever possible. Reserve push/pull techniques for cases where there is a genuine conflict between reading order and visual design — and always test with keyboard navigation.