Скрыть основное меню сайта на мобильном устройстве и планшете, MDL

Как сделать что бы когда пользователь заходил на сайт с мобильного устройства или планшета, основное меню nav скрывалось, а боковое меню drawer, поиск и вкладки tab оставались видимы?
Так же как сделать что бы первые 4 пункта 'a' в nav меню drawer были скрыты на компьютере, но видны на мобильном устройстве и планшете?
Используется фреймворк MDL.

<div class="content-grid">
<div class="mdl-layout
        mdl-js-layout mdl-layout--fixed-header
        mdl-layout--fixed-tabs">
    <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">Leniva</span>
            <div class="mdl-layout-spacer"></div>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                <label class="mdl-button mdl-js-button mdl-button--icon" for="search-expandable">
                    <i class="material-icons">search</i>
                </label>
                <div class="mdl-textfield__expandable-holder">
                    <input class="mdl-textfield__input" type="text" id="search-expandable" />
                    <label class="mdl-textfield__label" for="search-expandable">Search text</label>
                </div>
            </div>
        </div>
        <!-- Tabs -->
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect">
            <a href="#fixed-tab-1" class="mdl-layout__tab is-active">Kittens</a>
            <a href="#fixed-tab-2" class="mdl-layout__tab">Papies</a>
        </div>
    </header>
    <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Leniva</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="bemmdl.html">Home</a>
            <a class="mdl-navigation__link" href="bemmdl2.html">Blog</a>
            <a class="mdl-navigation__link" href="bemmdl3.html">About</a>
            <a class="mdl-navigation__link" href="bemmdl4.html">Contact</a>
            <a href="#" class="mdl-navigation__link">Products</a>
            <a href="#" class="mdl-navigation__link">Services</a>
            <a href="#" class="mdl-navigation__link">Portfolios</a>
            <a href="#" class="mdl-navigation__link">Achievements</a>
            <a href="#" class="mdl-navigation__link">Blog</a>
        </nav>
    </div>
    </div>
    </div>