Custom Mobile Stacking

Custom Mobile Stacking

Define a custom column order for mobile

This design pattern shows how to achieve a different column order for mobile devices.

Pine provides two column stacking reordering examples:

  • Reverse a 2-column layout
  • Custom order a 3-column layout


Reverse a 2-column layout

It's often the case when you have text on the left and an image on the right. That's fine for desktop, since it's visible right away.
But wouldn't it be nice if that image were shown first, for mobile devices?

How To:

  • add the mobile-full-width class on the <tr> wrapping your <th class="column"></th>
  • add the mobile-last class on the first column, and mobile-first on the second column
Requires the associated CSS rules, find them in /css/framework.css
You can use this technique only on layouts with 2 columns.

Tip: notice the mobile-p-b class on the second column's inner <th> ? More on that in Helpers.

Example: Reverse a 2-column Layout for Mobile
                        
                          

                          
First on desktop, second on mobile
Second on desktop, first on mobile

Custom order a 3-column layout

You can use a similar technique with a 3 (or more!) columns layout.
The first and last columns work the same, and all other columns get a mobile-intermediate class.
The intermediary columns will show up on mobile in the exact order they are defined in the markup.

Example: Custom Ordering a 3-column Layout
                        
                          

                          
 
First, but last on mobile
Second, but first on mobile
Last, but second on mobile
 
Theme Mountain

Current Version