diff --git a/docs/content/utilities/flexbox.md b/docs/content/utilities/flexbox.md
index 0917f72291..d8c8cc3925 100644
--- a/docs/content/utilities/flexbox.md
+++ b/docs/content/utilities/flexbox.md
@@ -132,8 +132,9 @@ You can choose whether flex items are forced into a single line or wrapped onto
 ### CSS
 
 ```css
-.flex-wrap     { flex-wrap: wrap; }
-.flex-nowrap   { flex-wrap: nowrap; }
+.flex-wrap           { flex-wrap: wrap; }
+.flex-nowrap         { flex-wrap: nowrap; }
+.flex-wrap-reverse   { flex-wrap: wrap-reverse; }
 ```
 
 ### Classes
@@ -142,6 +143,7 @@ You can choose whether flex items are forced into a single line or wrapped onto
 | --- | --- |
 | `.flex-wrap` | Flex items will break onto multiple lines (default) |
 | `.flex-nowrap` | Flex items are laid out in a single line, even if they overflow |
+| `.flex-wrap-reverse` | Behaves the same as wrap but cross-start and cross-end are permuted. |
 
 ### `flex-wrap` example
 
@@ -175,6 +177,22 @@ You can choose whether flex items are forced into a single line or wrapped onto
 </div>
 ```
 
+### `flex-wrap-reverse` example
+
+```html live
+<div class="border d-flex flex-wrap-reverse">
+  <div class="p-5 px-6 border bg-gray-light">1</div>
+  <div class="p-5 px-6 border bg-gray-light">2</div>
+  <div class="p-5 px-6 border bg-gray-light">3</div>
+  <div class="p-5 px-6 border bg-gray-light">4</div>
+  <div class="p-5 px-6 border bg-gray-light">5</div>
+  <div class="p-5 px-6 border bg-gray-light">6</div>
+  <div class="p-5 px-6 border bg-gray-light">7</div>
+  <div class="p-5 px-6 border bg-gray-light">8</div>
+  <div class="p-5 px-6 border bg-gray-light">9</div>
+</div>
+```
+
 ## Justify content
 
 Use these classes to distribute space between and around flex items along the **main axis** of the container.
diff --git a/src/utilities/flexbox.scss b/src/utilities/flexbox.scss
index a0cd73a588..ad19bff325 100644
--- a/src/utilities/flexbox.scss
+++ b/src/utilities/flexbox.scss
@@ -9,8 +9,9 @@
     .flex#{$variant}-column         { flex-direction: column !important; }
     .flex#{$variant}-column-reverse { flex-direction: column-reverse !important; }
 
-    .flex#{$variant}-wrap     { flex-wrap: wrap !important; }
-    .flex#{$variant}-nowrap   { flex-wrap: nowrap !important; }
+    .flex#{$variant}-wrap             { flex-wrap: wrap !important; }
+    .flex#{$variant}-nowrap           { flex-wrap: nowrap !important; }
+    .flex#{$variant}-wrap-reverse     { flex-wrap: wrap-reverse !important; }
 
     .flex#{$variant}-justify-start    { justify-content: flex-start !important; }
     .flex#{$variant}-justify-end      { justify-content: flex-end !important; }