- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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>
Published on 18-Jul-2018 10:23:32
- Related Questions & Answers
- Wrap flex items in reversed order in Bootstrap
- Avoid wrapping flex-items in Bootstrap on different screens
- Allow wrapping of flex items in Bootstrap on different screens
- Wrap flex items in Bootstrap
- Flex items into equal widths on different screens with Bootstrap 4
- Display flex items vertically and reversed on different screen sizes in Bootstrap 4
- Stretch gathered items on different screens in Bootstrap 4
- Stretch a flex item on different screens in Bootstrap 4
- Display flex items vertically and reversed in Bootstrap 4
- Stretch single rows of items on different screens in Bootstrap 4
- Wrap the flex items in reverse order with CSS
- Align flex items around on different screen sizes in Bootstrap
- Align gathered items in the center on different screens in Bootstrap 4
- Align a flex item in the center on different screens in Bootstrap 4
- Align gathered items "around" on different screens in Bootstrap 4
Advertisements