How to get a different mobile menu than desktop menu in the twentytwelve child theme

I would like to use a different menu for my mobile website than my desktop website. With different I mean the content not the layout. I just want to use the mobile menu of the twentytwelve theme.

What I’ve done so far:

In my child functions.php i’ve added the following code:

     register_nav_menus( array(
     'primary' => __( 'Primary Navigation', 'twentytwelve' ),
     'mobile' => __( 'Mobile Navigation', 'mobile'),
     ) );

Now i’m able to create two menus in my dashboard. (dashboard>menu>locaties)

In the header.php I don’t know exactly what to change so my mobile menu is loaded instead of my primary menu.

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

I’ve tried to change the <?php _e( 'Menu', 'twentytwelve' ); ?> to <?php _e( 'Menu', 'mobile' ); ?>, but this didn’t change the menu content to my mobile menu.

I’m not that familiar with this code so hopefully someone can point me in de right direction.

Thank you for your help!

As recommended in a similar post: https://wordpress.stackexchange.com/a/156494/74343

1.) Create the menus as you want them, and name them as you like, as an example “mobile-menu” and “desktop-menu“.

2.) In your child theme in the header.php you could switch according to the wp_is_mobile() flag like this:

if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'menu' => 'mobile-menu' ) );
} else {
     wp_nav_menu( array( 'menu' => 'desktop-menu' ) );
}

However I used the “WP Responsive Menu” plugin, which allowed me to select a menu for mobile as well. In the configuration of the “WP Responsive Menu” one needs to select the element NOT to show on mobile, which in the case of the twenty twelve theme is: “#site-navigation”.

Happy coding!