- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Wrap flex items in reversed order in Bootstrap on different screens
To wrap flex items in reverse order on different screen sizes, you need to use the flex-*wrap-reverse class.
The class gives options to reverse and wrap flex items on small, medium, large, and extra large screen sizes −
Small Screen Size (flex-sm-wrap-reverse)
<div class="d-flex flex-sm-wrap-reverse bg-primary"> <div class="p-2 border">Goal 1</div> <div class="p-2 border">Goal 2</div> <div class="p-2 border">Goal 3</div> <div class="p-2 border">Goal 4</div> . . . </div>
Large Screen Size (flex-lg-wrap-reverse)
<div class="d-flex flex-lg-wrap-reverse bg-primary"> <div class="p-2 border">Goal 1</div> <div class="p-2 border">Goal 2</div> <div class="p-2 border">Goal 3</div> <div class="p-2 border">Goal 4</div> . . . </div>
You can try to run the following code to work with flex-*wrap-reverse class −
Example
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2>Wrap</h2> <p>Flex Wrap</p> <div class="d-flex flex-wrap bg-primary"> <div class="p-2 border">Goal 1</div> <div class="p-2 border">Goal 2</div> <div class="p-2 border">Goal 3</div> <div class="p-2 border">Goal 4</div> <div class="p-2 border">Goal 5</div> <div class="p-2 border">Goal 6</div> <div class="p-2 border">Goal 7</div> <div class="p-2 border">Goal 8</div> <div class="p-2 border">Goal 9</div> <div class="p-2 border">Goal 10</div> <div class="p-2 border">Goal 11</div> <div class="p-2 border">Goal 12</div> <div class="p-2 border">Goal 13</div> <div class="p-2 border">Goal 14</div> <div class="p-2 border">Goal 15</div> <div class="p-2 border">Goal 16</div> <div class="p-2 border">Goal 17</div> <div class="p-2 border">Goal 18</div> <div class="p-2 border">Goal 19</div> <div class="p-2 border">Goal 20</div> </div><br> <p>Flex Wrap - Reverse</p> <div class="d-flex flex-wrap-reverse bg-primary"> <div class="p-2 border">Goal 1</div> <div class="p-2 border">Goal 2</div> <div class="p-2 border">Goal 3</div> <div class="p-2 border">Goal 4</div> <div class="p-2 border">Goal 5</div> <div class="p-2 border">Goal 6</div> <div class="p-2 border">Goal 7</div> <div class="p-2 border">Goal 8</div> <div class="p-2 border">Goal 9</div> <div class="p-2 border">Goal 10</div> <div class="p-2 border">Goal 11</div> <div class="p-2 border">Goal 12</div> <div class="p-2 border">Goal 13</div> <div class="p-2 border">Goal 14</div> <div class="p-2 border">Goal 15</div> <div class="p-2 border">Goal 16</div> <div class="p-2 border">Goal 17</div> <div class="p-2 border">Goal 18</div> <div class="p-2 border">Goal 19</div> <div class="p-2 border">Goal 20</div> </div><br> <p>Flex Wrap - Reverse - Small Width</p> <div class="d-flex flex-sm-wrap-reverse bg-primary"> <div class="p-2 border">Goal 1</div> <div class="p-2 border">Goal 2</div> <div class="p-2 border">Goal 3</div> <div class="p-2 border">Goal 4</div> <div class="p-2 border">Goal 5</div> <div class="p-2 border">Goal 6</div> <div class="p-2 border">Goal 7</div> <div class="p-2 border">Goal 8</div> <div class="p-2 border">Goal 9</div> <div class="p-2 border">Goal 10</div> <div class="p-2 border">Goal 11</div> <div class="p-2 border">Goal 12</div> <div class="p-2 border">Goal 13</div> <div class="p-2 border">Goal 14</div> <div class="p-2 border">Goal 15</div> <div class="p-2 border">Goal 16</div> <div class="p-2 border">Goal 17</div> <div class="p-2 border">Goal 18</div> <div class="p-2 border">Goal 19</div> <div class="p-2 border">Goal 20</div> </div> <p>Flex Wrap - Reverse - Large Width</p> <div class="d-flex flex-lg-wrap-reverse bg-primary"> <div class="p-2 border">Goal 1</div> <div class="p-2 border">Goal 2</div> <div class="p-2 border">Goal 3</div> <div class="p-2 border">Goal 4</div> <div class="p-2 border">Goal 5</div> <div class="p-2 border">Goal 6</div> <div class="p-2 border">Goal 7</div> <div class="p-2 border">Goal 8</div> <div class="p-2 border">Goal 9</div> <div class="p-2 border">Goal 10</div> <div class="p-2 border">Goal 11</div> <div class="p-2 border">Goal 12</div> <div class="p-2 border">Goal 13</div> <div class="p-2 border">Goal 14</div> <div class="p-2 border">Goal 15</div> <div class="p-2 border">Goal 16</div> <div class="p-2 border">Goal 17</div> <div class="p-2 border">Goal 18</div> <div class="p-2 border">Goal 19</div> <div class="p-2 border">Goal 20</div> </div> </div> </body> </html>
Updated on: 18-Jun-2020
135 Views
Advertisements