One of the features of both flex boxes and grids is that their children can accept a special style: order:#. This enables the grid or flex box object to display their contents in an order unrelated to their actual html coded position.

As a consequence, although panels in the APW my be ordered; Temperature, Rainfall, Winds, Pressure and Solar, you can alter this simply by adding a style order:x; and replacing the 'x' with a number to indicate the rank order of each panel.

• Direct children of the grid or flex box with no number are considered to have the number '0' and will be displayed in coding order.
• Children with an order number will be displayed in numerical ascending order
• Children with the same order number will continue to be displayed together in coding order.

There are always exceptions. This particularly applies to grids as they also support areas of the grid being named. If order numbers are used in a named grid then all content allocated to the named area and its numerical equivalent will appear in that one area. Note that named areas can occupy more than one grid area and that content will overlay in the order in which it is coded.