Hey there.
For it to flow naturally with primary first on a single page then you'd definitely need that below:
<!-- #primary -->Unless you did something via JS:
http://stackoverflow.com/questions/7628627/change-order-divs-with-jquery
You mentioned when you do it the way I suggested that it pushes the sidebar down so they're not beside each other, this is most likely some padding, margin or width. It would be easier if I could see it happening to be able browse through developer tools. :)
Looking at the default theme on the main blog page it sets the primary margin on the right to -26.4% and then the secondary has a margin right of 7.6% along with a width of 18.8% (totals 26.4%). You'd need to maybe do something similar to that.
Take care.