JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="row">
            <div class="col-xs-4 col-sm-2 col-md-2 col-lg-1 h-100 col-centered">
            Hello
            </div>                
            <div class="col-xs-8 col-sm-4 col-md-4 col-lg-2 brick"></div>
            <div class="col-xs-8 col-sm-4 col-md-4 col-lg-2 brick"></div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-2 brick"></div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-2 brick"></div>
            <div class="col-xs-8 col-sm-2 col-md-2 col-lg-2 brick"></div>
        </div>    
         <div class="row">                
            <div class="col-xs-8 col-sm-2 col-md-2 col-lg-2 brick"></div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-2 brick"></div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-2 brick"></div>
            <div class="col-xs-8 col-sm-4 col-md-4 col-lg-2 brick"></div>
            <div class="col-xs-8 col-sm-4 col-md-4 col-lg-2 brick"></div>
            <div class="col-xs-4 col-sm-2 col-md-2 col-lg-1 brick"></div>
        </div>   

<div class="row">
            <div class="col-xs-4 col-sm-2 col-md-2 col-lg-1 brick"></div>                
            <div class="col-xs-8 col-sm-4 col-md-4 col-lg-2 brick"></div>
            <div class="col-xs-8 col-sm-4 col-md-4 col-lg-2 brick"></div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-2 brick"></div>
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-2 brick"></div>
            <div class="col-xs-8 col-sm-2 col-md-2 col-lg-2 brick"></div>
        </div>

CSS

.brick {
    background-color: red;
    border: 2px solid white;
    height: 50px;
}
.v-center{
   display: flex;
   align-items: center;
   text-align:center;
   color:red;
}
.is-table-row {
        display: table;
    }
    .is-table-row [class*="col-"]{
        float: none;
        display: table-cell;
        vertical-align: top;
    }