Responsive navigation using SiteFinity OOTB functionality

Thanks for your time.

I'm using SiteFinity 5.2 and the OOTB RadMenu to display a very typical horizontal rollout DHTML navigation menu that is three layers deep.

I am trying to think of a way to preserve this menu on desktop browsers but when resized smaller have the CSS respond with a scaled-back, display appropriate rendered version of the navigation that includes only the 0-level menu and omits all the children.

My constraints are the following:

1.) I don't want to build a completely different version of the site for this, I am looking for a responsive solution I can test in real time without a page reload
2.) I would prefer not to have duplicate the navigation (once for desktop+ sizes, then again with a simpler version for everything < desktop size) and control their visibility with media queries because that sounds inefficient.

 If possible I want to avoid coding customization because (A.) I'm a CMS user, not a bona fide developer and (B.) future SiteFinity upgrades may affect those customizations (what little ASP.NET work I've been involved has always had that customize->update version->regress->start over motif.)

To provide an example, Twitter Bootstrap's responsive CSS takes their horizontal nav LI-based menu and stuffs it away for toggle show/hide as block level nav items. This pattern provides a simple solution for me to model my navigation on, I just don't know to pull it off with SiteFinity's nested RadMenu.

Any suggestions are very much appreciated!

I'd be interested to find a solution for this as well - looking at rebuilding one of the sites I look after to allow for complete responsive design as we have found more and more people are using mobile devices to access our site.