Diferente mdl-layout__drawer para pantalla grande y pantalla pequeña en MDL

Estoy tratando de crear dos mdl-layout__drawer diferentes para pantallas pequeñas y pantallas grandes. Según el código siguiente, solo en pantalla pequeña, mdl-layout__drawer muestra que no se muestra en pantalla grande.

  

¿Alguien puede decirme qué está mal en el código? ¿Cómo puedo resolver este problema?

Todo su código debe estar envuelto en un div que contenga mdl-layout , mdl-js-layout y mdl-layout--fixed-drawer clases de mdl-layout--fixed-drawer . El último es responsable de mostrar el menú de navegación en pantallas grandes. Pluma aquí .