Responsive design

So im self teaching myself responsive design & am trying to put together a right hand divider that remains the same size, while the left hand resizes down to 240 before pushing the right div down..

The reasoning - so that changing window sizes keeps the correct format and the design is suitable for various mobile devices (down to 240px).

Now with the way it is setup I cannot seem to get the right div to push down below the left once the screen width is reduced to less than 480px.

CSS

.menu {
position: relative;
float: left;
min-width: 240px;
margin-left: -240px;
}
.content {
position: relative;
float: left;
min-width: 240px;
}

@media screen {
    .content {
        width: calc(100% - 240px);
        margin-right: 240px;
    }
    .menu {
    }
}

What I can't figure out to do is to force the div (MENU) after the left div (CONTENT) for devices with a width of 480px or less? The reason for designing this way is so that the left content is scalable for all screen sizes (thus avoiding breakpoints for specific devices), but at the point where 480px is reached i want the elements to be displayed one after the other..

JS FIDDLE

Solution

After some lucky research, I have found that the following appears to work, but am not sure if this a reasonable or 'dirty' fix;

@media (min-width: 1px) and (max-width: 479px) {
    .menu {
        margin-left: 0px;
    }
}

So a min-width and max-width is needed for the exception, in which the margin-left of <div class="menu"></div> is updated to 0px.

So below devices with a screen width of 480px it will shift the right side menu div down below the left side navigation div...