Modify news, web apps layouts for mobile site?

Question

I am modifying an existing website to create a mobile version, placing my mobile pages in a /mobile subfolder. I am having an issue with the news and web apps, as I have already designated my templates and layouts for the full desktop version, and because my news and webapp items cannot be placed into my /mobile folder. So, now I need to display that information differently for mobile and cannot figure out how, since I am limited to a single List Layout and a single Detail Layout (for news. At least the web apps give me an Backup List Layout, which was helpful). How have others accomplished this type of thing??
An example: On my desktop version, I have announcements shown on the homepage as short blurbs (using the list view). My detail view I already have formatted for the full screen desktop version and does not work well for mobile screens. After many attempts at workarounds, I decided that I would simply show the complete announcement for mobile as a List Layout and not use a Detailed Layout at all so that I don't even have to bother with it. My thought was to code both my desktop and mobile list layouts in the List Layout of my Announcements module, and use css to show/ hide the appropriate one.
E.g.--
html in my List Layout:
<div id="standardnews">
<h3>{tag_subject} - {tag_eventfromdate}</h3>
<p>{tag_body, 140}</p>
</div>
<div id="mobilenews">
<h3>{tag_subject_nolink} - {tag_eventfromdate}</h3>
<p>{tag_body}</p>
</div>
on my desktop css stylesheet:
div#standardnews { display:block; }
div#mobilenews { display:none; }
on my mobile css stylesheet:
div#standardnews { display:none; }
div#mobilenews { display:block; }
The css works just fine, however, on my mobile site instead of rendering the event from date, it actually rendered the tag itself "{tag_eventfromdate}".  So, apparently I can't have multiple instances of a tag within a single page??  Is there a way around this?
I would be grateful for any input here on the best way to handle this type of thing, given the limitations I am running into.

Answer 1

You can make as many list templates as you like now.
You can have a different template per device - phone, tablet, desktop so if modules are in that template they will then render those different templates and thus different layouts.
If you have modules in pages that page can be differnt per device as outlined under site settings and mobile section.
Unlimited list layouts - http://www.businesscatalyst.com/_blog/BC_Blog/post/Video_Create_custom_list_templates_for_ BC_Modules/
You CAN NOT though have conditional tags in BC yet and you can not in one list layout have tags render differently based on the device.
Style and presentation you use media quries and the System tag for device provided by BC.