Reactive/fluid/liquid layout question, How to get items to "stack" Options

[cardinaltree]

Hi! I am trying to create a relatively simple website that has four main columns in the content area (two above, two below) that I want to sit normally at high screen resolutions but to rearrange to "stack" when the browser size is small/smaller screens (mobile, etc.). I feel like I'm so close, but I cannot figure out how to make it work. I've been putting in the main elements and I've hit a wall because whenever I resize the browser the right column simply overlaps the left, instead of reordering like I want it to.

Is there an easy way to get this to work? I've seen extremely complex template solutions on Google (ie. http://www.columnal.com/, which is exactly what I want but I don't want to redo all of my existing code around this new system) but they don't seem necessary for this. I'm using two float-left divs in a container with the left at 45% width and the right column at 55% width. Positioning is relative on both.

Picture 1: Original comp in Photoshop.


Picture 2: Wide browser view (which is fine).


Picture 3: Small browser view (which is not ok with the overlapping columns).


To again clarify, my ideal solution would be for the last picture to instead be showing the slideshow (aka the right column) in its own row above the "welcome" text (aka the left column), which would be in its own row.

Thanks!

Edit: Uploading the work-in-progress site right now: http://fangirltainment.com/robinhood/

This post has been edited by cardinaltree: Mar 20 2012, 05:17 PM