fix(docs): improve responsive docs

docs/config/template/index.template.html

@@ -53,16 +53,16 @@ <h1 class="md-toolbar-tools" style="padding-top:25px;">
     <md-toolbar md-theme="indigo" class="md-medium-tall app-toolbar">
 
       <div class="md-toolbar-tools" ng-click="openMenu()">
-        <button class="menu-icon" hide-md aria-label="Toggle Menu">
+        <button class="menu-icon" hide show-phone show-tablet aria-label="Toggle Menu">
           <md-icon icon="img/icons/ic_menu_24px.svg">
           </md-icon>
         </button>
-        <p hide show-sm ng-if="menu.currentSection.name">
+        <p hide-phone ng-if="menu.currentSection.name">
           {{menu.currentSection.name}}
         </p>
         <span layout="column" layout-align="center center" class="menu-separator-icon"
           ng-if="menu.currentPage">
-          <img style="height: 16px;" src="img/docArrow.png" alt="" aria-hidden="true" hide block-sm>
+          <img style="height: 16px;" src="img/docArrow.png" alt="" aria-hidden="true" hide-phone>
         </span>
         <h2 ng-bind="(menu.currentPage | humanizeDoc) || 'Angular Material'" flex>
         </h2>
@@ -86,10 +86,10 @@ <h2 ng-bind="(menu.currentPage | humanizeDoc) || 'Angular Material'" flex>
         </md-button>
         <md-button ng-href="{{currentDoc.githubUrl}}">
           <md-icon icon="/img/icons/ic_launch_24px.svg"></md-icon>
-          <span hide block-sm>View on Github</span>
-          <span hide-sm>Source</span>
+          <span hide-phone>View on Github</span>
+          <span hide show-phone>Source</span>
         </md-button>
-        <md-button ng-href="{{currentDoc.githubEditUrl}}" hide show-sm>
+        <md-button ng-href="{{currentDoc.githubEditUrl}}" hide-phone>
           <md-icon icon="/img/icons/ic_launch_24px.svg"></md-icon>
           <span>Improve This Doc</span>
         </md-button>