JSFiddle - React, Tailwind, and code Playground

by tr_santi

HTML

<section>
    <header class="col-lg-9">
        <!-- some content -->
    </header>
    <header class="col-lg-3">
        <!-- some content -->
    </header>
</section>

CSS

section header.col-lg-9 {
    float: left;
    height: 100px;
    width: 70%;
    background-color: red;
}

section header.col-lg-3 {
    float: right;
        height: 100px;
    width: 30%;
    background-color: blue;
}

@media only screen and (max-width: 991px) {
    
    section header.col-lg-9 {
        float: right;
    }
    
    section header.col-lg-3 {
        float: left;
    }
    
    section::after {
        content: '';
        display: table;
        clear: both;
    }
}