fix(docs): fix @media breakpoints for small/extra small devices

Previously, our custom styles used `@media` breakpoints for
small/extra small devices that were off-by-one from
[Bootstrap breakpoints](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)
(767px vs 768px). This caused the site to not be displayed correctly on
these exact sizes, which affected for example all iPad devices (whose
screens are exactly 768px wide).

This commit fixes it by making our breakpoints match those of Bootstrap.

Fixes #16448

Closes #16449

Author: gkalpak

docs/app/assets/css/docs.css

@@ -713,14 +713,14 @@ ul.events > li {
   margin-right: 5px;
 }
 
-@media only screen and (min-width: 769px) {
+@media only screen and (min-width: 768px) {
   [ng-include="partialPath"].ng-hide {
     display: block !important;
     visibility: hidden;
   }
 }
 
-@media only screen and (min-width: 769px) and (max-width: 991px) {
+@media only screen and (min-width: 768px) and (max-width: 991px) {
   .main-body-grid {
     margin-top: 160px;
   }
@@ -729,7 +729,7 @@ ul.events > li {
   }
 }
 
-@media only screen and (max-width : 768px) {
+@media only screen and (max-width: 767px) {
   .picker, .picker select {
     width: auto;
     display: block;