JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
<div class="col-md-12 row2 visible-xs">yellow box top</div>
    <div class="col-md-12 row1 clearfix"  >
        <div class="col-xs-6">red box left</div>
        <div class="col-xs-6">red box right</div>
    </div>
    <div class="col-md-12 row2 hidden-xs ">yellow box bottom</div>
</div>

CSS

.row1 {
    background:red;
}

.row2 {
    background:yellow;
}