tec: Provide a .row--wrap class

assets/stylesheets/utils/flow.css

@@ -49,3 +49,21 @@
         margin-left: var(--flow-size);
     }
 }
+
+.flow-smaller.row--always.row--wrap > *,
+.flow-small.row--always.row--wrap > *,
+.flow.row--always.row--wrap > *,
+.flow-large.row--always.row--wrap > *,
+.flow-larger.row--always.row--wrap > * {
+    margin-bottom: var(--flow-size);
+}
+
+@media (min-width: 800px) {
+    .flow-smaller.row--wrap > *,
+    .flow-small.row--wrap > *,
+    .flow.row--wrap > *,
+    .flow-large.row--wrap > *,
+    .flow-larger.row--wrap > * {
+        margin-bottom: var(--flow-size);
+    }
+}

assets/stylesheets/utils/rows.css

@@ -26,6 +26,10 @@
     justify-content: center;
 }
 
+.row--wrap {
+    flex-wrap: wrap;
+}
+
 .row__item--extend {
     flex: 1;
 }

docs/developers/rows-and-grids.md

@@ -71,6 +71,20 @@ To add space between row items, just use one of the `.flow*` classes:
 </div>
 ```
 
+In certain cases, you may want the items of the row to be placed on a new line.
+This can be done with `.row--wrap`:
+
+```html
+<div class="row row--wrap">
+    <div>A</div>
+    <div>Lot</div>
+    <div>Of</div>
+    <div>Items</div>
+</div>
+```
+
+Before using this class, please consider the grid system first.
+
 You can tell a row item to take all the remaining space with `.row__item--extend`:
 
 ```html