Make second div appear above first, without absolute position or changing html

Question

My page is split into 3 slices, as shown in this JFiddle.

In my full source code, I have media queries to help manage sizing between mobile and desktop. When someone

Answer 1

I tried to solve the solution using transform: translateY property in percentage value.

Note: This works if and only if the two containers have same height. or if the height is already known, then you can set the transform: translateY value according to the height.

CSS

@media (max-width: 700px) {
    #container > div {
        width: auto;
        display: block;
        float: none;
    }
    #container #picture {
        display: none;
    }
    #logo {
        transform: translateY(-100%);
    }
    #items {
        transform: translateY(100%);
    }
}

Working Fiddle

Answer 2

Probably the easiest is if you play with minus margins. Note that the below sizes (width and side margins) may need to be adjusted to your specific needs.

#container * {
    width: 95vw;
    text-align: center;
}

#items {
    width: 50%; /* #picture is hidden so we split the screen into 2 */
    float: left;
    margin-top:30px; /* has to be smaller than the absolute of #logo */
    margin-left:25%; /* half of the element's width */
}

#logo {
    width: 50%; /* #picture is hidden so we split the screen into 2 */
    float: right;
    margin-top:-40px; /* its absolute has to be greater than the one of #items */
    margin-right:25%; /* half of the element's width */
}

#picture {
    width: 33%;
    float: right;
    display:none; /* Hiding #picture as you said you would */
}

<div id="container">
    <div id="items">Items</div>
    <div id="logo">Logo</div>
    <div id="picture">Picture</div>
</div>

Answer 3

Flexbox layout is your friend here. display: flex can be used to interchange the elements position on the layout.

#container { display:flex; flex-direction: column; text-align:center;}
#items { order: 2 }
#logo { order: 1 }
#picture { display: none; }

<div id="container">
    <div id="items">Items</div>
    <div id="logo">Logo</div>
    <div id="picture">Picture</div>
</div>

display: flex works only in modern browsers. Check caniuse.

A test on my android mobile shows it working on Firefox and Chrome, but not on the stock Android browser.