grid-breakpoint fix

grid-breakpoint for sm is 576px
https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss#L186

current document shows 544px, but it should be 576px

diff --git a/docs/layout/overview.md b/docs/layout/overview.md
index 758854b8aa875324303adfe9735494413fc94017..8ed7671a984d2370c0971de1ea85ea0e26e8533a 100644 (file)
--- a/docs/layout/overview.md
+++ b/docs/layout/overview.md
@@ -57,11 +57,11 @@ Since Bootstrap is developed to be mobile first, we use a handful of [media quer
 Bootstrap primarily uses the following media query ranges—or breakpoints—in our source Sass files for our layout, grid system, and components.
 
 {% highlight scss %}
-// Extra small devices (portrait phones, less than 544px)
+// Extra small devices (portrait phones, less than 576px)
 // No media query since this is the default in Bootstrap
 
-// Small devices (landscape phones, 544px and up)
-@media (min-width: 544px) { ... }
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) { ... }
 
 // Medium devices (tablets, 768px and up)
 @media (min-width: 768px) { ... }
@@ -93,8 +93,8 @@ Since we write our source CSS in Sass, all our media queries are available via S
 We occasionally use media queries that go in the other direction (the given screen size *or smaller*):
 
 {% highlight scss %}
-// Extra small devices (portrait phones, less than 544px)
-@media (max-width: 543px) { ... }
+// Extra small devices (portrait phones, less than 576px)
+@media (max-width: 575px) { ... }
 
 // Small devices (landscape phones, less than 768px)
 @media (max-width: 767px) { ... }
@@ -121,11 +121,11 @@ Once again, these media queries are also available via Sass mixins:
 We also have media between the breakpoint's minimum and maximum widths for only the given screen size:
 
 {% highlight scss %}
-// Extra small devices (portrait phones, less than 544px)
-@media (max-width: 543px) { ... }
+// Extra small devices (portrait phones, less than 576px)
+@media (max-width: 575px) { ... }
 
-// Small devices (landscape phones, 544px and up)
-@media (min-width: 544px) and (max-width: 767px) { ... }
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) and (max-width: 767px) { ... }
 
 // Medium devices (tablets, 768px and up)
 @media (min-width: 768px) and (max-width: 991px) { ... }