Wrap flex items in reversed order in Bootstrap on different screens

BootstrapWeb DevelopmentCSS Framework

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

Live Demo

<!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>
raja
Published on 18-Jul-2018 10:23:32
Advertisements