JSFiddle - React, Tailwind, and code Playground

HTML

<div id="maincontainer">


    <div class="first">Side Bar </div>

    <div class="second">Side Bar Content </div>

</div>

CSS

#maincontainer {
    width: 100%;
    float: right;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.first {
    order: 2;
    float: left;
    width:50%;
    background-color: antiquewhite;
    min-height: 20%;
    text-align: center;
    font-family: cursive;
    font-size:24px; 
}

.second {
    order: 1;
    float: right;
    width: 50%;
    background-color: aqua;
    min-height: 20%;
    text-align: center;
    font-family: cursive;
    font-size:24px; 
}

@media all and (min-width:320px) and (max-width:480px) {
    .first {
        width: 100%;
    }
    .second {
    width: 100%;
    
    }
}