Foundation CSS Flexbox Utilities Source Ordering
Last Updated :
16 Mar, 2022
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
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