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:
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?
Tip: notice the mobile-p-b class on the second column's inner <th> ? More on that in Helpers.
First on desktop, second on mobile
Second on desktop, first on mobile
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.