Omega Theme: how to change the stacking order of each region for each layout? I´m starting my first theme with Omega. I´ve read the documentation, and managed to understand how it works.
My problem here is that I don´t know how to stack regions in different order for each layout.
I know that I can hide some regions with css and the different css files provided by the omega subtheme, but how to change the order?

Let me explain with an example:

I have this in my wide and tablet (normal) layout:


  HEADER SECTION: 
  
  User Bar First -- User Bar Second -- Branding
  
  CONTENT SECTION: ...
  
  FOOTER SECTION: ...


For my mobile version I have this:


  HEADER SECTION:
  
  User Bar First
  
  User Bar Second
  
  Branding
  
  CONTENT SECTION: ...
  
  FOOTER SECTION: ...


And I want it to be:


  HEADER SECTION:
  
  User Bar First
  
  CONTENT SECTION: ...
  
  User Bar Second
  
  Branding
  
  FOOTER SECTION: ...


Any idea on how to do that?
Thanks!
The browser, not the server, knows the width of the layout. So you cannot change the stacking order on the server side and move the regions or zones up and down without having the browser talk back to the server, which Omega doesn't do.

You could use Javascript to move things around, which is painful. You could also duplicate the content you want to be in the different places, and then hide it or display it with display: none and display: block. But then you are outputting multiple copies of the content and lengthening page load time.

Here's a similar discussion about (not) changing stacking order in Omega: http://drupal.org/node/1343798.