I need to create a responsive layout based on the requirements shown in the picture. Does anyone have any ideas for this without using JavaScript or server side logic? The primary issue I am having is that using a standard 3 column approach the middle content area would follow the left and right columns in HTML. Therefore, it is almost impossible to have that middle area become the first item within the mobile context. The only thing I can think of is absolute positioning the left and right columns but that does not work when the height of the left and right columns are not constant but flexible based on different content. Any ideas here?

Screen shot 2012-12-08 at 5.21.15 PM.png

I do currently have a solution but it sacrifices the flexible height of the left and right column. The actual content that will be shown in the left column here is an ad. That ad will always be 250x300. The content in the right column will be a list of three items with a picture that are floated next to each other in a single line. For the most part it is safe to say that the content within the far right column will not make that column expand past 300px. Therefore, I can sort of get away with placing the middle area first in the HTML than using absolute positioning to position the left and right column. However, I really rather not use this technique since if the content in the left or right columns ever needs to changed everything will need to be reworked.