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.

src/components/whiteframe/demoBasicClassUsage/style.css

@@ -3,7 +3,9 @@ md-whiteframe {
   margin: 30px;
   height: 100px;
 }
-@media screen and (max-width: 599px) {
+
+/* For breakpoint `-xs` */
+@media (max-width: 599px) {
   md-whiteframe {
     margin: 7px;
     height: 50px;
@@ -13,7 +15,9 @@ md-whiteframe {
     font-size: 0.4em;
   }
 }
-@media screen and (min-width: 600px ) and (max-width: 959px) {
+
+/* For breakpoint `-sm` */
+@media (min-width: 600px ) and (max-width: 959px) {
   md-whiteframe {
     margin: 20px;
     height: 75px;
@@ -22,7 +26,9 @@ md-whiteframe {
     font-size: 0.6em;
   }
 }
-@media screen and (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 screen  and (min-width: 1200px) {
+/* For breakpoint `-gt-md` */
+@media (min-width: 1280px) {
   md-whiteframe {
     margin: 25px;
     height: 100px;