JSFiddle - React, Tailwind, and code Playground

by Paulie_D

HTML

<div class="container">
    <div id="one">Content1</div>
    <div id="two">Content2</div>
    <div id="three">Content3</div>
</div>

CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.container div {
    height: 150px;
    border:1px solid red;
    margin-bottom: 10px;
}
.container {
    padding: 5px;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 500px;
}
#one, #two {
    width: 200px;
}
#three {
    width: 500px;
}
@media (max-width: 600px) {
    #one {
        order: 1;
        width: 500px;
    }    

    #two {
        order: 3;
        width: 500px;
    }    


    #three {
        order: 2;
    }