Semantic-UI Responsive Grid Reverse Order
Last Updated :
13 Mar, 2022
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
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
Reference: https://semantic-ui.com/collections/grid.html#reverse-order
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...