From 39fc46fb71544d70b374d969c2acdadb16f9d89c Mon Sep 17 00:00:00 2001 From: Jonathan Hawkins Date: Thu, 20 Jun 2019 21:47:24 -0400 Subject: [PATCH] Combine duplicate documentation examples into one to fix the confusing text. fixes issue #28892 --- site/content/docs/4.3/layout/grid.md | 32 ++++++++-------------------- 1 file changed, 9 insertions(+), 23 deletions(-) diff --git a/site/content/docs/4.3/layout/grid.md b/site/content/docs/4.3/layout/grid.md index 0da95311fe..1cd1697704 100644 --- a/site/content/docs/4.3/layout/grid.md +++ b/site/content/docs/4.3/layout/grid.md @@ -149,17 +149,21 @@ For example, here are two grid layouts that apply to every device and viewport, {{< /example >}} -Equal-width columns can be broken into multiple lines, but there was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if you're up-to-date. +### Equal-width multi-line + +Create equal-width columns that span multiple lines by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{< docsref "/utilities/display" >}}). + +There was a [Safari flexbox bug](https://github.com/philipwalton/flexbugs#flexbug-11) that prevented this from working without an explicit `flex-basis` or `border`. There are workarounds for older browser versions, but they shouldn't be necessary if you're up-to-date.
{{< example >}}
-
Column
-
Column
+
col
+
col
-
Column
-
Column
+
col
+
col
{{< /example >}} @@ -231,24 +235,6 @@ Use `col-{breakpoint}-auto` classes to size columns based on the natural width o {{< /example >}}
-### Equal-width multi-row - -Create equal-width columns that span multiple rows by inserting a `.w-100` where you want the columns to break to a new line. Make the breaks responsive by mixing the `.w-100` with some [responsive display utilities]({{< docsref "/utilities/display" >}}). - -
-{{< example >}} -
-
-
col
-
col
-
-
col
-
col
-
-
-{{< /example >}} -
- ## Responsive classes Bootstrap's grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.