fix(whiteframe): update breakpoints in whiteframe class demo

Use the same breakpoints as in attribute demo.
This changes the breakpoints to the current layout breakpoints.
And annotated the media queries with the given breakpoint.

  Closes #6911

src/components/whiteframe/demoBasicClassUsage/style.css

@@ -3,6 +3,8 @@ md-whiteframe {
   margin: 30px;
   height: 100px;
 }
+
+/* For breakpoint `-xs` */
 @media (max-width: 599px) {
   md-whiteframe {
     margin: 7px;
@@ -13,6 +15,8 @@ md-whiteframe {
     font-size: 0.4em;
   }
 }
+
+/* For breakpoint `-sm` */
 @media (min-width: 600px ) and (max-width: 959px) {
   md-whiteframe {
     margin: 20px;
@@ -22,7 +26,9 @@ md-whiteframe {
     font-size: 0.6em;
   }
 }
-@media (min-width: 960px ) and (max-width: 1199px) {
+
+/* For breakpoint `-md` */
+@media (min-width: 960px ) and (max-width: 1279px) {
   md-whiteframe {
     margin: 20px;
     height: 90px;
@@ -33,7 +39,8 @@ md-whiteframe {
   }
 }
 
-@media (min-width: 1200px) {
+/* For breakpoint `-gt-md` */
+@media (min-width: 1280px) {
   md-whiteframe {
     margin: 25px;
     height: 100px;