Reorder sections on mobile?

1

Hi as per subject - want to know if it’s currently possible to reorder sections in mobile view (not columns).

Our page flow would work better if two of the sections were swapped.

I notice there is an “Order” field in the Section element (content tab), but I can’t find any usage on it and adding numeric values doesn’t seem to be affecting the look in the editor or the front end.

Thanks!

2

Wrap the sections in a block. Then, set the order to -1 on the one you want to move to the top on mobile.

3 Likes
3

Further @bret’s answer:

If using Flex or Grid, you can use order.

Another approach, if using Flex, is to use “flex-direction: column-reverse;” on mobile (if you just have two columns)

4 Likes
4

Definetly a flex solution.
By default, items in a flexbox have an order set to 0 so there is no preference.
As soon as you assign an items a positive value, it will move to the end as it is higher that 0.
IF you want to move an item to the start, a shortcut (as mentioned by Bret above) is to use -1 and that is less that 0 so it moves to the start.

HTML:

<div class="outer">
  <div class="div-01">01</div>
  <div class="div-02">02</div>
  <div class="div-03">03</div>
  <div class="div-04">04</div>
</div>

CSS:

.outer {
  display: flex;
}

.div-01 {
  order: 3;
}

.div-04 {
  order: -1;
}

Result:

04 02 03 01

1 Like