You can’t. If the page is cached, the whole finished page is taken from cache; how can the template be switched? The page is already generated with the original template.
You could create two documents, using two different templates, with the mobile one just using a TV or a snippet to get the content from the main document so you don’t need to duplicate the content, and each with a TV to indicate the ID of its corresponding document. Then use a snippet to detect the browser type and get the TV value, and redirect to the other type of document if necessary. Keep them in separate container/documents, and have their menus only display the items in their respective branches of the Document Tree.
This way you would have both documents in the cache.
Can’t you do the same thing with CSS? Similar to a print .css file? Most handheld browsers should recognize the handheld media type. If they don’t, you could again use a snippet to determine the browser type and output a different css file name:
<link rel="stylesheet" type="text/css" href="assets/templates/mytemplate/[!BrowserType!].css" media="all" />
By calling the snippet uncached, it will get processed even if the page is cached.
http://www.howtocreate.co.uk/tutorials/css/mediatypes