Skip to content
Related Articles

Related Articles

Semantic-UI Responsive Grid Reverse Order

Improve Article
Save Article
  • Last Updated : 13 Mar, 2022
Improve Article
Save Article

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website looks more amazing. It uses a class to add CSS to the elements.

Semantic-UI Grid layout is used to harmonize the negative space layout. The grid element is used to create a grid-based layout system that helps the rows and columns. Grid elements make it easier to design any webpage without using floats and positioning. Semantic-UI Responsive Grid Reverse Order is used to reverse the order of columns or rows elements on mobile devices. 

Semantic-UI Responsive Grid Reverse Order Class:

  • mobile reversed: This class is used to reverse the grid elements on mobile devices.

Syntax:

<div class="ui mobile reversed equal width grid">
      <div class="column"> Content... </div>
      ...
</div>

Example 1: This example describes the uses of Semantic-UI Responsive Grid Reverse Order.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Responsive Grid Reverse Order
    </title>
  
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>
            Semantic-UI Responsive Grid Reverse Order
        </h3>
  
        <div class="ui mobile reversed four column grid justified">
            <div class="column">
                HTML stands for HyperText Markup Language. 
                It is used to design web pages using a 
                markup language. It is the combination of 
                Hypertext and Markup language.
            </div>
            <div class="column">
                CSS (Cascading Style Sheets) is a stylesheet 
                language used to design the webpage to make 
                it attractive. The reason for using this is 
                to simplify the process of making web pages 
                presentable.
            </div>
            <div class="column">
                JavaScript is the world most popular 
                lightweight, interpreted compiled programming 
                language. It is also known as scripting 
                language for web pages. 
            </div>
            <div class="column">
                jQuery is an open-source JavaScript library 
                that simplifies the interactions between an 
                HTML/CSS document, or more precisely the 
                Document Object Model (DOM), and JavaScript. 
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Responsive Grid Reverse Order

Semantic-UI Responsive Grid Reverse Order

Example 2: This example describes the uses of Semantic-UI Responsive Grid Reverse Order.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Responsive Grid Reverse Order
    </title>
  
    <link rel="stylesheet"
          href=
</head>
  
<body>
    <div class="ui container center aligned">
        <h2 style="color:green">
            GeeksforGeeks
        </h2>
  
        <h3>
            Semantic-UI Responsive Grid Reverse Order
        </h3>
  
        <div class="ui mobile reversed four column 
            grid stackable justified">
            <div class="column">
                HTML stands for HyperText Markup Language. 
                It is used to design web pages using a 
                markup language. It is the combination of 
                Hypertext and Markup language.
            </div>
            <div class="column">
                CSS (Cascading Style Sheets) is a stylesheet 
                language used to design the webpage to make 
                it attractive. The reason for using this is 
                to simplify the process of making web pages 
                presentable.
            </div>
            <div class="column">
                JavaScript is the world most popular 
                lightweight, interpreted compiled programming 
                language. It is also known as scripting 
                language for web pages. 
            </div>
            <div class="column">
                jQuery is an open-source JavaScript library 
                that simplifies the interactions between an 
                HTML/CSS document, or more precisely the 
                Document Object Model (DOM), and JavaScript. 
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Semantic-UI Responsive Grid Reverse Order

Semantic-UI Responsive Grid Reverse Order

Reference: https://semantic-ui.com/collections/grid.html#reverse-order


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!