First of all, really sorry for the delayed response. Support crew was on summer vacation thus it caused some delay on replying support inquiries.
This is a 100% custom modification and normally we don't provide free support or step-by-step instructions for custom coding modifications. But here is your guide you should follow;
You can use CSS3 Media Queries to show/disable anything on different resolution.
For instance, open this CSS:
www.matakanasuperfoods.com/super_foods/templates/jm-beauty-center-ef4/html/com_virtuemart/assets/css/flexible.css
scroll to the bottom and enter this rule:
@media (max-width: 767px) {
.flexibleDropdown { display:none !important;}
}
then, the "Dropdown" box won't show up upon hovered when the resolution is below 767px (covers mobile devices)
Having a different theme for responsive can only be supported by your Joomla Template. It is bigger task to achieve.
To move the "Shopping Cart" icon to the right side (next to "Sign In" button) for responsive layout, use this rule:
@media (max-width: 767px) {
div#jm-top-bar-in > div { float: right !important; margin: 0 15px;}
}
and you will get this layout on mobile:
Attachment ScreenShot2015-09-18at6.01.36PM.png not found
You can use those kind of small CSS rules to do further layout modifications.
Regards.