The default order in which flex items are displayed is according to the order they appear in the source code. However, this order can be controlled with the order property, which is used for specifying the position of a flex item relative to other flex items in a flex container. The property is noninherited and takes an integer value. Elements are laid out in an ascending order using the value (i.e., an element with a value of 2 comes after one with a value of 1, and one with 3 comes after one with 2, and so on). The default is 0. Elements with the same value are laid out in the order in which they appear in the source code. The property only affects visual order, not logical or tab order (i.e., navigation via TAB). Figures 19.20 and 19.21 show how the property is used and the effect.
Notice in the example that the order in which the elements are displayed is different from the order they appear in the HTML code. The body{} rule makes text color on the page white and the main{} rule makes the <main> element a flex container. The article{} rule specifies the background color for the <article> element, says to make the element fully flexible, and sets the order. The nav{} and aside {} rules set the background color, maximum width, and order for the <nav> and <aside> elements, respectively. The header{} and footer{} rules specify the background color of the <header> and <footer> elements, and because no width is specified, they occupy the width of the browser window.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.