Search code examples
cssstylesheet

Place DIVS inside av DIV under the first DIV

I would like to place to DIVS (grey & red) inside a DIV (black) under the first DIV (black) when you resize the window and the screen is less than 1024 px. Take a look at the example under. You can also see the image attached.

I would really like som advice here, im totally lost here at the moment.

This is how I want it to be on screens more than 1024px:

<div id="black">
    <div id="grey"></div>
    <div id="red"></div>
</div>

This is how I want it to be on screens less than 1024 px:

<div id="black"></div>
<div id="grey"></div>
<div id="red"></div>

Image showing a grey and red rectangle side by side in a padded black box. Underneath there is a variant where it shows black, grey, red in three horizontal strips.

Solution

  • Sorry, but that is not possible as written.

    You cannot move items outside their containing structures using CSS. You can only reformat them within their present structure.

    Optionally, you can duplicate the existing black div and show/hide one or the other based on media queries (screen size).

    Or, you can use jQuery/javascript to move the DOM items. But CSS alone cannot do this.