The difference I can see in your code samples is that in the "mobile" version you have "middle content" after "left bar", contrary to the "desktop" version, where you have "left bar" before "middle content". Is that correct?
Let me start to say that the way the "div"s are presented in the HTML code does not mean much: it is the CSS which decides how the content is placed on the screen (with some limitations).
However, with the fluid grid layout, you can have different CSS styles for mobile / tablet / desktop, not different HTML.
That is why you have to have equal HTML and different CSS, keeping in mind that desktop CSS is inherited from tablet (unless where differently specified) and tablet inherits from mobile.
If I were you, I would do like this:
<div id="left for desktop">
<div id="left for mobile">same content as "left"
Then, in the CSS, I would make "left for mobile" not visible for desktop (with display:none).
I would make "left for desktop" not visible for mobile.
Hope this helps!
But wouldn't that duplicate "left" content?
Google doesn't like duplicate content.
The Dreamweaver Fenruary update might be of help in this case (have not tested it yet, though)
(12.2 update) When you select an inserted element, the options to hide, duplicate, lock, or delete the Div are displayed. For Divs layered on top of each other, the option to swap Divs is displayed.
'Box-ordinal-group' property can be used to achieve the same.