Question

The question title pretty much sums it up. I’m wondering if it’s possible to have two divs side by side like:

DIV #1 | DIV #2

But then if the screen is too small (for example on a mobile device) I would like this to happen:

DIV #2

DIV #1

That is, DIV #1 slides down instead of DIV #2

Cheers,
Ben.

Answer 1

You probably use floats for the divs to sit next to each other. Use @media-queries to change this behaviour when the screen is too small. In your CSS file:

@media only screen and (max-width: 480px) {
    /* when window size is below 480px */
    div {
        float: none;
    }
}

It’s just an example which will set float:none to all divs on your website if the window size is smaller than 480px; adjust it to achieve what you want 🙂