JSFiddle - React, Tailwind, and code Playground

by ppollono

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="row">
    <div class="col-sm-4">
        <div class="elA">Title A</div>
        <div class="elA">Graph A</div>
        <div class="elA visible-xs">List A</div>
    </div>
    <div class="col-sm-4">
        <div class="elB">Title B</div>
        <div class="elB">Graph B</div>
        <div class="elB visible-xs">List B</div>
    </div>
    <div class="col-sm-4">
        <div class="elC">Title C</div>
        <div class="elC">Graph C</div>
        <div class="elC visible-xs">List C</div>
    </div>
    <div class="col-sm-12 elA hidden-xs">List A</div>
    <div class="col-sm-12 elB hidden-xs">List B</div>
    <div class="col-sm-12 elC hidden-xs">List C</div>
</div>

CSS

.row > div > div {
    margin-bottom: 10px;
    border: 1px solid #000;
}
.elA {
    background-color: #E99048;
}
.elB {
    background-color: #B0C07E;
}
.elC {
    background-color: #B0B9DC;
}