====== Ordering the Panels ======

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

==== How it works ====
  * 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.

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

==== Pages that can use this feature ====
The following pages all use either grids or flexbox layouts and so can be '//manipulated//' using the **order:x** style:

  * All the **Charts** pages:<wrap indent>This is usually limited to the placement of any buttons and information text.  You may prefer the buttons to be above or below the charts.</wrap>
  * All the **Records** pages.<wrap indent>You may also wish to experiment making them single or two column layouts.</wrap>
  * The **NOAA Reports**<wrap indent>You can place the selectors below the report if you wish.</wrap>
  * The **Gauges**<wrap indent>You can place the gauges in any order you wish.  This is a flexbox layout so, although you can place the //**information**// panel at the top, it may reduce in size to a standard sized panel.  It has been given an order number of 22 by default.</wrap>
  * The **Today Vs Yesterday** page.<wrap indent>Place the the panels in any order that you wish. You may also like to experiment making it a two column layout.</wrap>
  * The **Yesterday**, **Today** and **Dashboard** pages.