Show 'more' option to show after window size is 480px

Show 'more' option to show after window size is 480px

What I'm trying to do is essentially a show and hide but only when the
screen size is 480px or smaller.
Its a simple menu. Show all items if the window size is not a max-size of
480px. When the window size is smaller or equal to 480px, give the option
to show more of the menu. But if the user clicks the 'More' option, hide
the first 2 items and replace with the hidden options. And in vice versa.
Example: (Window size 480px):
Home
Email
... More
<!---- 'MORE' CLICKED ----!>
People
Explore
... More
So my question is this: how do I replace the first div with the second and
make it toogle?
My code:
$('a.show-more').click(function(){
$('.mobile-1').hide();
$('.mobile-2').show();
},function(){
$('.mobile-1').show();
$('.mobile-2').hide();
});
Here is a fiddle to show what I'm working with. Thank you for your help in
advance.