- Foundation Tutorial
- Foundation - Home
- Foundation - Overview
- Foundation - Installation
- Foundation - Starter Projects
- Foundation - Kitchen Sink
- Foundation General
- Foundation - Global Styles
- Foundation - Sass
- Foundation - JavaScript
- Foundation - JavaScript Utilities
- Foundation - Media Queries
- Foundation - The Grid
- Foundation - Flex Grid
- Foundation - Forms
- Foundation - Visibility Classes
- Foundation - Base Typography
- Foundation - Typography Helpers
- Foundation - Basic Controls
- Foundation - Navigation
- Foundation - Containers
- Foundation - Media
- Foundation - Plugins
- Foundation SASS
- Foundation - Sass Functions
- Foundation - Sass Mixins
- Foundation Libraries
- Foundation - Motion UI
- Foundation Useful Resources
- Foundation - Quick Guide
- Foundation - Useful Resources
- Foundation - Discussion
Foundation - Flex Grid Source Ordering
Description
Source ordering helps to rearrange the column in different size of screens. Using the order property, the columns are sorted into the row, i.e. the lowest number is arranged at the first place.
Example
The following example demonstrates the use of Source Ordering in Foundation −
<!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> <title>Foundation Template</title> <link rel = "stylesheet" href = "css/foundation.css" /> <script src = "js/vendor/jquery.min.js"></script> <script src = "js/foundation.min.js"></script> </head> <body> <h2>Example of Flex Grid</h2> <div class = "row"> <div class = "column order-1 medium-order-2" style = "background-color:#8BD6EE;"> Appears first on small screen </div> <div class = "column order-2 medium-order-1" style = "background-color:#7B68EE;"> Appears second on small screen </div> </div> </body> </html>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given html code flex_grid_source_ordering.html file.
Open this HTML file in a browser, an output is displayed as shown below.
foundation_flex_grid.htm
Advertisements