Sharepoint 2010 WebParts Rendering in different zone then assigned

Question

In my sharepoint page layout I have a control that has WebPart Zones. For mobile devices I would like to render a different control that would contain only some WebPart Zones from the original one.

The problem is that when there are already WebParts assigned to each Zone, then if the zone is not present the WebPart is still being rendered but in some other Zone.

<div class="col">
    <SharePoint:WebPartZone PartChromeType="None" ID="zoneLeft" runat="server" Title="Left" />
</div>
<div class="col mid">
    <SharePoint:WebPartZone PartChromeType="None" ID="zoneMiddle" runat="server" Title="Middle" />
</div>
<div class="col">
    <SharePoint:WebPartZone PartChromeType="None" ID="zoneRight" runat="server" Title="Right" />
</div>

and alternatively I would like to render only

<div class="col mid">
    <SharePoint:WebPartZone PartChromeType="None" ID="zoneMiddle" runat="server" Title="Middle" />
</div>

But as mentioned all the webparts assigned to the left and right zone are still being rendered but in the middle zone. I would like them not to render at all. What would be the best way of doing it?

I've tried to do it like this and it works:

<div class="col" runat="server" visible="false">
    <SharePoint:WebPartZone PartChromeType="None" ID="zoneLeft" runat="server" Title="Left" />
</div>
<div class="col mid">
    <SharePoint:WebPartZone PartChromeType="None" ID="zoneMiddle" runat="server" Title="Middle" />
</div>
<div class="col" runat="server" visible="false">
    <SharePoint:WebPartZone PartChromeType="None" ID="zoneRight" runat="server" Title="Right" />
</div>

but most certainly it isn't the best solution, as the webparts are still being loaded -> only not rendered (as I see it..)