Foundation CSS Flexbox Utilities Source Ordering - Coding

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

Reffered: https://www.geeksforgeeks.org

CSS

Related
Semantic-UI Rail Dividing Type
Foundation CSS Responsive Accordion Tabs
Semantic-UI Rail Close Variation
Semantic-UI Stacked Segments Group
Semantic-UI Modal Content

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	9