Search code examples
htmlcsspositioning

Two divs side by side, but force the right div to stay above the left div if the screen is too small

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.

Solution

  • 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 :)