JSFiddle - React, Tailwind, and code Playground

by venkateshwar

HTML

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

CSS

#container {
    /* added border for demo */
    border: 1px solid black;
}
/* clear fix */
 #container:after {
    content:"";
    clear: both;
    display: block;
}
#container > div {
    text-align: center;
    float: left;
    width: 33.333%;
}
@media (max-width: 700px) {
    #container > div {
        width: auto;
        display: block;
        float: none;
    }
    #container #picture {
        display: none;
    }
    #logo {
        transform: translateY(-100%);
    }
    #items {
        transform: translateY(100%);
    }
}