Hide or show content on mobile devices

Hi,
We have a bunch of videos first on the home page of:
http://theodyssey.ca/

I want to be able to hide them as soon as the start stacking on mobile devices because we want the option to buy tickets to be visible.

Ideally I want to create another content block below it that is the same but shows the videos only on the mobile devices after they start stacking.

I’ve tried:

@media screen and (max-width: 320px)
{.mobileHide{display:none;}}
@media screen and (max-width: 480px){.mobileHide{display:none;}}
@media screen and (max-width: 650px){.mobileHide-main{display:none;}}

and

.mobileHide { display: inline;}
/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){ .mobileHide { display: none;}}

Also, the mobile menu isn’t working – I click on the button and nothing happens. It’s set correctly to the Main Menu in menus.

Question 2: is it possible to a mobile top menu? We need the location of the venue at the top.

Question 3: why isn’t my Instagram widget working on mobile devices?

Help please 🙂