[docs] Update breakpoints.md for clarity (#14527)

* Update breakpoints.md for clarity

As proposed in the discussion from issue #13448 [Breakpoints] functions down() and between() adds +1 to index, the breakpoint widths are described as a range. Furthermore, I found some broken hash links that I attempted to fix.

* alternative

docs/src/pages/layout/breakpoints/breakpoints.md

@@ -5,13 +5,22 @@
 For optimal user experience, material design interfaces need to be able to adapt their layout at various breakpoints.
 Material-UI uses a **simplified** implementation of the original [specification](https://material.io/design/layout/responsive-layout-grid.html#breakpoints).
 
-Each breakpoint matches with a *fixed* screen width:
+Each breakpoint (a key) matches with a *fixed* screen width (a value):
 
-- **xs**, extra-small: 0px or larger
-- **sm**, small: 600px or larger
-- **md**, medium: 960px or larger
-- **lg**, large: 1280px or larger
-- **xl**, extra-large: 1920px or larger
+- **xs,** extra-small: 0px
+- **sm,** small: 600px
+- **md,** medium: 960px
+- **lg,** large: 1280px
+- **xl,** extra-large: 1920px
+
+These [breakpoint values](/customization/default-theme/?expend-path=$.breakpoints.values) are used to determine breakpoint ranges. A range starts from the breakpoint value inclusive, to the next breakpoint value exclusive:
+
+```js
+value         |0px     600px    960px    1280px   1920px
+key           |xs      sm       md       lg       xl
+screen width  |--------|--------|--------|--------|-------->
+range         |   xs   |   sm   |   md   |   lg   |   xl
+```
 
 These values can always be customized.
 You will find them in the theme, in the [`breakpoints.values`](/customization/default-theme/?expend-path=$.breakpoints.values) object.
@@ -25,6 +34,7 @@ for controlling the layout of your application through the [Grid](/layout/grid/)
 
 CSS media queries is the idiomatic approach to make your UI responsive.
 We provide four [CSS-in-JS](/customization/css-in-js/) helpers to do so:
+
 - [theme.breakpoints.up(key)](#theme-breakpoints-up-key-media-query)
 - [theme.breakpoints.down(key)](#theme-breakpoints-down-key-media-query)
 - [theme.breakpoints.only(key)](#theme-breakpoints-only-key-media-query)
@@ -113,7 +123,7 @@ const styles = theme => ({
 
 #### Returns
 
-`media query`: A media query string ready to be used with JSS.
+`media query`: A media query string ready to be used with JSS, which matches screen widths less than and including the screen size given by the breakpoint key.
 
 #### Examples
 
@@ -139,7 +149,7 @@ const styles = theme => ({
 
 #### Returns
 
-`media query`: A media query string ready to be used with JSS.
+`media query`: A media query string ready to be used with JSS, which matches screen widths greater than and including the screen size given by the breakpoint key.
 
 #### Examples
 
@@ -166,7 +176,7 @@ const styles = theme => ({
 
 #### Returns
 
-`media query`: A media query string ready to be used with JSS.
+`media query`: A media query string ready to be used with JSS, which matches screen widths greater than the screen size given by the breakpoint key in the first argument and less than the the screen size given by the breakpoint key in the second argument.
 
 #### Examples