Using this basic 2 column layout, where the left one is fluid and the right is fixed, can someone please help me grasp how I can make the right column go under the left one when the screen width is reduced beyond a point, such as on small tablets and phones, using CSS? The main thing I want to keep from what I have is that when they are next to eachother, that the columns have an equal height, which in this case is achieved with display:table-cell.
For now I have been using a single stylesheet, and at the end of it I have
@media only screen and (max-width: 700px)
and then do things like resetting paddings and format for mobile and small screens (usually going to a single column). Is there a way to use @import or something so that a desktop user with more than 700px screen width doesn’t need to download the “mobile” code? I tried using
@import url(mobile.css) (max-width:700px);
where mobile.css contains what was previously under the @media query, but my phone (opera mobile on HTC) isn’t downloading it (but my desktop does when I make the window thin enough)
EDIT:actually it doesn’t work on my desktop either