Friend I see 2 situations in your code, rather I see 1 and in it I can define the following conclusions:
Using css class with responsibility for delivering content at different resolutions ;
I do not know how the displays and position of your containers (banner / menu) are.
So let's go there:
When you want to deliver different images at x resolutions, leave that responsibility to the browser, as it becomes difficult to predict such a situation, Progressive Enhancement in the vein! How do you do this ?
Simple, there is a new html attribute to resolve this issue is srcset="img1, img2..." inclusive it gets a modifier as a parameter to identify the device pixel . Ex:
<img src="path-img" alt="desc-img" srcset="img-baixa.jpg 1x, img-alta.jpg 2x">
Note: There are other modifiers other than the x (device pixel) value just look at the W3C documentation.
Now variables as the containers, because I can not know or predict why I can not see your css code, then I can state the following:
It is natural that container stacking occurs when it is with .myContainer{display:inline;} or .myContainer{float:left;}
What defines who will come first or last ?
Simple, the order you wrote your element in html, of course there are other considerations but here we anticipate the common nature of DOM without Reflow's
Based on this information, please review your css or post here for us! Abs.
