Drop navigation links to 2 lines for phone size

Question

Hi everyone, Happy Thursday (Or brain dead Thursday for me)!
I'm working on a new "responsive" project.  Being a new project, I'm starting with the smallest width and working my way up.
I have a simple navigation at the top of the page with six text "roll-over" links.
On the smaller size (smart phone - 320px), I need to "wrap" the text links to 2 lines, then one line for all the rest of the larger sizes.  I also need to move a graphic that is directly below the links down to accomodate for the extra line, then back up again when the window size changes.  For some reason, I can't figure how to go about doing this.  Also, the navigation will be added to an existing HTML page when completed.
My question is:
      How do I tell Edge to move the nav from two lines of text to one line (and move the graphic) when I hit a particular window size (media query)?
I will have media queries set up in the CSS for the HTML portion of the page.  Could I simply "show/hide" a particular div, one with the two lines for the nav and one with one line using CSS, or is there a better way?
If it is possible to do the "show/hide" div idea, would it be better (or even possible) to make different navigation animations for each media queries (where needed)?
Sorry about my temporary (I hope!) "brain dead" condition :-)
James

Answer 1

OK, I thought I'd post this for others trying to get Edge Commons to work for their projects.
When you go to the Edge Commons "tutorial" video:
http://tv.adobe.com/watch/create-like-crazy-with-adobe-edge/flexible-l ayouts-using-adobe-edge-animate-and-the-edge-commons-library/
http://tv.adobe.com/watch/create-like-crazy-with-adobe-edge/flexible-layouts-using-adobe-e dge-animate-and-the-edge-commons-library/(Great video and a "must watch" for anyone contemplating using the Edge Commons plugin) They now have a download link for the Edge Commons code files!
Keep in mind, however, that their example is using static images for each size mentioned (300px, 600px, 900px).
If you have "animated" symbols, these will not work as intended!  They WILL play each symbol depending on the screen resolution (300px, 6000px, 900px - Or whatever you set them to) but only the first image!
Fortunately, the solution below is simple!
1. Follow their instructions for setting Edge Commons up:
Under the "Open actions for stage" option ( left of the "Stage" Action in the timeline, click on the {} symbol), add the following code to the 2 options mentioned below:
resize:
if (EC) {
          EC.applyAdaptiveLayout(sym, "adaptiveContainer");
compositionReady:
yepnope({
          load: "http://simonwidjaja.github.com/EdgeCommons/live/EdgeCommons-0.4.0.js",
          //load: "http://localhost/Aktiv/Intern/EdgeCommons/GitHub/master/sprint/EdgeCommons-Sprint-0.0.4.js",
          //load: "http://localhost/Aktiv/Intern/EdgeCommons/GitHub/master/live/EdgeCommons-0.4.0.js",
          callback: function() {
                    EC.setAdaptiveLayouts( [300, 600, 900] );
                    EC.applyAdaptiveLayout(sym, "adaptiveContainer");
2. For each symbol you are playing, add the following code the to  "creationComplete" action:
sym.play(); (or just click on the "play" button to the right)!
That's It!
Everything should work just fine for each screen size you added in the "compositionReady" action!
Hope that helps!
James