Correct Mobile header not showing in child theme

I’m using wp 3.5 and the latest twenty twelve theme.

I brief I need to find a way for a child theme within twenty twelve show the child theme header and not the twenty twelve theme header on mobile devices.

I have created a child theme and created a new header.php within the child theme. The new header.php changes the placement of the header image, to the top, adds a new image for advertisement, and has the menu below these images. The header.php works fine on a laptop/desktop monitor. When I resize the web browser on a laptop/desktop monitor the site resizes correctly eventually showing the menu button instead of the entire menu list. Everything works fine on the laptop/desktop monitor.

The problem is when I access the site using a mobile phone – the mobile site now shows the old header used under the twenty twelve theme and not the child theme.

My question is how to ensure the site uses the child theme header.php file instead of the twenty twelve header.php?

See the site at rrrater.wpengine.com. Accessing the site on a regular monitor works fine but the old header is used for mobile phones.

Thanks in advance,

Dave