diff --git a/docs/content/utilities/flexbox.md b/docs/content/utilities/flexbox.md index c2958500..abff9093 100644 --- a/docs/content/utilities/flexbox.md +++ b/docs/content/utilities/flexbox.md @@ -91,10 +91,10 @@ Use these classes to define the orientation of the main axis (`row` or `column`) #### Example using `.flex-column-reverse` -This example uses the responsive variant `.flex-sm-column-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order. +This example uses the responsive variant `.flex-md-column-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order. ```html live -
+
Item 1
Item 2
Item 3
@@ -103,10 +103,10 @@ This example uses the responsive variant `.flex-sm-column-reverse` to override ` #### Example using `.flex-row` -This example uses the responsive variant `.flex-sm-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. +This example uses the responsive variant `.flex-md-row` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. ```html live -
+
Item 1
Item 2
Item 3
@@ -115,10 +115,10 @@ This example uses the responsive variant `.flex-sm-row` to override `.flex-colum #### Example using `.flex-row-reverse` -This example uses the responsive variant `.flex-sm-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order. +This example uses the responsive variant `.flex-md-row-reverse` to override `.flex-column` Learn more about responsive flexbox utilities **[here](#responsive-flex-utilities)**. Keep in mind that it won't affect screen readers or navigating with the keyboard and it's advised to keep the markup in a logical source order. ```html live -
+
Item 1
Item 2
Item 3
@@ -541,7 +541,7 @@ Add `.flex-grow-0` to prevent an item from growing. This can be useful when used ```html live
flex item
-
.flex-auto .flex-sm-grow-0
+
.flex-auto .flex-md-grow-0
flex item
``` @@ -681,7 +681,7 @@ Resize window to see the effect. ```html live
-
1. .flex-order-1 .flex-sm-order-none
+
1. .flex-order-1 .flex-md-order-none
2.
3.
@@ -718,8 +718,8 @@ Each responsive style is applied to the specified breakpoint and up. Mixing flex properties: ```html live -
-
.flex-self-stretch
+
+
.flex-self-stretch
 
 
@@ -745,14 +745,14 @@ You can use flex utilities to make a simple media object, like this: Here is an example of a media object that is **vertically centered on large screens**, but converts to a stacked column layout on small screens. ```html live -
-
+
+
-
+

Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

-
+