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/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
        
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/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/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
        
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/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>