DEVICE STACK

Device Stack is a useful tool to determine how columns stack on mobile devices. Often you might wish columns to stack in two columns rather than one on mobile and here we look at the settings available.

In the video above, notice the Frame that immediately wraps around the columns is where you will find the Device Stack feature.

There are three settings available:

SINGLE 
Single is the default setting. E.g. if your page has 3 columns, on Mobile they will be stacked each column on top of each other, with left on top.

DOUBLE (VIDEO ABOVE)
Double is a popular control and stacks your double stacks your blocks into 2 columns. 

If your page has 3 columns and also select Double, the first two with appear in 2 columns on mobile, with the third below.

FIXED (VIDEO BELOW)
Fixed is used to fix all columns on Mobile, in one row. Effectively, this disables the stacking action. and displays your columns on Mobile as they would be on Desktop. For example, this is a great feature where you have a set of icons, that you'd like to line up horizontally next to each other on Mobile.

  D03 E02    02:24

Show on Devices: Desktop, Tablet, Mobile

Here you learn how to show and hide Frames on Mobile, Table and Desktop which can be extremely useful to show less on mobile so that you content is both neat and concise.

  D03 E02    01:09

Column Reverse

Column Reverse on Mobile will reverse the order in which your columns stack on Mobile. By default, the Left Column stacks to the top on Mobile, though by setting Column Reverse the Columns will stack from Right to Left. Therefore, in this example, the Title Column, will stack on top, ensuring consistent mobile formatting with other Layouts on the page.