How do I change element order on a smaller Webflow breakpoint?

Do not drag the element for one breakpoint

Webflow starts on the desktop breakpoint. Styles you set there flow down to tablet, mobile landscape, and mobile portrait, and they also flow up to the larger breakpoints if you have added them. A style you set on tablet flows down to both mobile widths. It does not flow back up to desktop.

Moving an element is not one of those styles. Any change to element order or placement, on the canvas or in the Navigator, affects every breakpoint. You cannot reorder elements for one breakpoint by dragging them. Deleting an element removes it everywhere too.

The widths Webflow uses are tablet at 991px and below, mobile landscape at 767px and below, and mobile portrait at 479px and below. Switch with the breakpoint icons in the canvas bar before you change Order. The mobile layout guide is the pass for a page that already scrolls or overlaps. This page is only the order of elements on a smaller width.

Example: a feature row shows a photo on the left and a paragraph on the right at desktop. On a phone, the paragraph should come first so the visitor reads it before the photo. Dragging the paragraph above the photo in the Navigator would swap them on desktop too.

Set flex order on the child

The parent of that row needs to be a flex parent. Select the parent and set Style panel, Layout, Display to Flex. The direct children become flex children.

Select the child you want to move, on the smaller breakpoint, and open Style panel, Flex child, Order. Webflow offers four choices:

• Don't change, which keeps the child's default place
• First, which shows that child first in the parent
• Last, which shows that child last in the parent
• Customize order, which takes a number

Example: on mobile portrait, select the paragraph and set Order to First. The photo stays after it on that width. Desktop still shows the photo first, because you did not set Order on desktop.

First is the number -1. Last is the number 1. Children that share a custom number keep the order they already had in the Navigator.

Reversing the parent direction flips every child. That is a different control from Order on one child. The flex wrap guide is wrap, which keeps the current order and moves overflow to the next line.

Use numbers when several children move

When more than one child should take a new place, use Customize order for each of them. Do not mix First or Last into that set. A custom number greater than 1 places the child after any child set to Last. A custom number smaller than -1 places the child before any child set to First.

Example: three cards should read Intro, Details, Photo on the phone, and Photo, Intro, Details on desktop. On mobile portrait, set Intro to 1, Details to 2, and Photo to 3. Leave desktop on Don't change so the Navigator order remains the desktop order. If desktop was built in a different Navigator order, set the desktop numbers too, on the desktop breakpoint.

An Order value set on tablet also applies to mobile landscape and mobile portrait, until you override it on one of those smaller widths. A blue or pink label means the value is set on the breakpoint you are viewing. An orange label means it cascaded from another breakpoint. Click that label and choose Reset to clear it. You can also Option-click on Mac, or Alt-click on Windows, on the indicator. Clearing a value that cascades clears it on the breakpoints it flows to. If you reset Order on tablet, you also clear it on both mobile widths that inherited it.

Set grid child order the same way

Direct children of a grid can change position and order on a breakpoint. Select the grid child and open Style panel, Grid child, Order. Grid child settings apply to the selected element. They are not saved on the class. They still cascade to smaller breakpoints. The grid guide is how to build the columns and rows. This page uses that grid only for order.

Dragging a grid child on the canvas or in the Navigator repositions it, and that kind of move applies to every breakpoint. Use Grid child, Order, while the smaller breakpoint is selected, when the phone should show a different sequence and desktop should not.

Nested elements inside a grid child are not grid children. If the photo and the paragraph sit inside one box, Order on the box moves the whole box. Put the photo and the paragraph in the grid as direct children, or set flex Order on the parent that actually contains them.

Check reading order, then publish

Flex order and a reversed flex direction change where the elements appear. They do not change document order. Webflow notes that the visual order and the document order will not match, which can be confusing for visitors. The same idea applies to a grid's dense setting: it changes where items display, not where they sit in the page source. After you set Order, click through the row with the keyboard on the published page and confirm the sequence still makes sense. If it does not, change the Navigator order for every breakpoint instead, and accept that desktop and mobile will share that source order.

Switch to mobile portrait in the Designer and read the row. Then publish and check a real phone. The canvas change is not the live site until that publish.

Changing order on a page you already have is ordinary layout work. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Additional work is $75 per hour and starts only after you approve a written estimate.