Semantic-UI Responsive Grid Reverse Order
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ 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:
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ 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:
Reference: https://semantic-ui.com/collections/grid.html#reverse-order
Contact Us