Column 1
This column will remain in postion 1 for both wide and small screens.
Column 2
This column will move to position 3 for small screens.
Reordering Column Positions in Maxi Sub-Menus
One of the more powerful features of the Flexbox specification is the ability to change the order in which flex elements appear on your page. This is but one the reasons why Maxi Menu Magic is so special! The sample menu below has a Maxi mega sub-menu with 3 columns. The center column is pretty-much decorative. Although it looks great on wide screens in its default center position, it will take up too much valuable vertical space on the phone. Optimally, we would like to see center column display last on a phone. With Maxi Menu Magic, this can be done easily.
How to test the sample menu on this page
The sample menu above features Maxi Sub Menu column reordering for small screens, using the CSS instructions from the tutorial. To demo the menu, mouse over or tap the Maxi Sub Menu Trigger in a wide browser window. Note the order of the columns. To see the columns reordered, reduce the width of your browser window. When it reaches 768px, the columns will reorder.