Reordering Individual Flex Items using CSS3

---

<p>To reorder individual Flex Items using CSS3, use the order property. Following is the code for reordering flex items &minus;</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/6LckqRhj" rel="nofollow" target="_blank">&nbsp;Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style&gt; body { &nbsp; &nbsp;font-family: &quot;Segoe UI&quot;, Tahoma, Geneva, Verdana, sans-serif; } .container { &nbsp; &nbsp;height: 150px; &nbsp; &nbsp;display: flex; &nbsp; &nbsp;width: 100%; &nbsp; &nbsp;border: 2px solid red; } div { &nbsp; &nbsp;width: 200px; &nbsp; &nbsp;height: 150px; &nbsp; &nbsp;color: white; &nbsp; &nbsp;text-align: center; &nbsp; &nbsp;font-size: 30px; } .first { &nbsp; &nbsp;background-color: rgb(55, 0, 255); &nbsp; &nbsp;order:2; } .second { &nbsp; &nbsp;background-color: red; &nbsp; &nbsp;order:3; } .third { &nbsp; &nbsp;background-color: rgb(140, 0, 255); &nbsp; &nbsp;order:1; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Reordering individual items example&lt;/h1&gt; &lt;div class=&quot;container&quot;&gt; &lt;div class=&quot;first&quot;&gt;First Div&lt;/div&gt; &lt;div class=&quot;second&quot;&gt;Second Div&lt;/div&gt; &lt;div class=&quot;third&quot;&gt;Third Div&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><h2>Output</h2><p>The above code will produce the following output &minus;</p><p><img src="https://www.tutorialspoint.com/assets/questions/media/38095/reordering.jpg" class="fr-fic fr-dib" width="600" height="267"></p>

• Related Questions & Answers
• Enable Wrapping of Flex Items using CSS3
• Align Flex Items along Cross Axis using CSS3
• Wrap flex items in Bootstrap
• Understanding the Flex Layout Model in CSS3
• Avoid wrapping flex-items in Bootstrap
• Show flex items horizontally in Bootstrap
• Wrap the flex items with CSS
• Avoid wrapping flex items with CSS
• Set the flex items vertically with CSS
• Align flex items from everywhere in Bootstrap
• Display flex items vertically in Bootstrap 4
• Set the flex items horizontally with CSS
• Wrap flex items in reversed order in Bootstrap
• Controlling the Dimensions of Flex Items in CSS
• Set Flex Items into equal width columns with Bootstrap