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.
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.