Foundation CSS Flexbox Utilities Source Ordering Last Updated : 16 Mar, 2022 Comments Improve Suggest changes Like Article Like Report Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and JavaScript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster. In Foundation CSS, Flexbox classes are used to make the horizontal and vertical alignments super easy. Flexbox has Source ordering classes that order the columns according to the number specified in the order class. Foundation CSS Flexbox Utilities Source Ordering Classes: small-order-n: This class is used to specify the column order on the small screen size according to the specified number.medium-order-n: This class is used to specify the column order on the medium screen size according to the specified number.large-order-n: This class is used to specify the column order on the large screen size according to the specified number. Syntax: <div class="Source-Ordering-classes "> ... </div> Note: Here n can be 1,2,3,.... according to the number of columns and their ordering. Example 1: This example illustrates the use of Flexbox Utilities Source Ordering using grid-margin-x class. HTML <!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Flexbox Utilities Source Ordering</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Foundation CSS Flexbox Utilities Source Ordering</h3> <div class="grid-x grid-margin-x"> <div class="cell small-6 large-4 small-order-3 medium-order-2 large-order-1 callout success"> small-3, medium-2 larger-1. </div> <div class="cell small-6 large-4 small-order-2 medium-order-1 large-order-3 callout alert"> small-2, medium-1 larger-3. </div> <div class="cell small-6 large-4 small-order-1 medium-order-3 large-order-2 callout warning"> small-1, medium-3 larger-2. </div> </div> </center> <script> $(document).ready(function () { $(document).foundation(); }) </script> </body> </html> Output: Foundation CSS Flexbox Utilities Source Ordering Example 2: This example illustrates the use of Flexbox Utilities Source Ordering using grid-padding-x class. HTML <!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Flexbox Utilities Source Ordering</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"> </script> </head> <body> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Foundation CSS Flexbox Utilities Source Ordering</h3> <div class="grid-x grid-padding-x"> <div class="cell small-6 large-4 small-order-3 medium-order-2 large-order-1 callout success"> small-3, medium-2 larger-1. </div> <div class="cell small-6 large-4 small-order-2 medium-order-1 large-order-3 callout alert"> small-2, medium-1 larger-3. </div> <div class="cell small-6 large-4 small-order-1 medium-order-3 large-order-2 callout warning"> small-1, medium-3 larger-2. </div> </div> </center> <script> $(document).ready(function () { $(document).foundation(); }) </script> </body> </html> Output: Foundation CSS Flexbox Utilities Source Ordering Reference: https://get.foundation/sites/docs/flexbox-utilities.html#source-ordering Comment More infoAdvertise with us Next Article Foundation CSS Flexbox Utilities Source Ordering Y yasarnnp Follow Improve Article Tags : Web Technologies CSS Geeks Premier League Geeks-Premier-League-2022 Foundation Foundation-Utilities +1 More Similar Reads Foundation CSS Flexbox Utilities Sass Reference Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. Flexbox Utilities: In Foundation CSS, Flexbox class 3 min read Foundation CSS Flexbox Utilities Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. Flexbox Utilities: In Foundation CSS, Flexbox classes a 3 min read Foundation CSS Flexbox Mode Sass Reference Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to lay out nice responsive websites, apps, and emails and can be accessible to any device. Foundation CSS gives access to a lot of pre-built components, we can easil 2 min read Foundation CSS Flexbox Mode Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, M 8 min read Foundation CSS Prototyping Utilities Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. The Prototyping Utilities facilitate the building o 3 min read Foundation CSS Utilities Complete Reference Foundation CSS has different types of utility like Prototyping Utilities Sizing is used to give width and height to an element. There is a various utility that helps to make it easy for us. Complete list Foundation CSS Utility are listed below: Foundation CSS Prototyping Utilities Foundation CSS Pro 2 min read Foundation CSS Flex Grid Offsets Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we discuss flex grid offsets. flex g 2 min read Foundation CSS Prototyping Utilities Sizing Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. In this article, we will discuss the Prototyping Utilit 2 min read Foundation CSS Prototyping Utilities Sass Reference Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, 4 min read Foundation CSS Prototyping Utilities Positioning A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is 3 min read Like