JSFiddle - React, Tailwind, and code Playground

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 elA">Title A</div>
    <div class="col-sm-4 elB">Title B</div>
    <div class="col-sm-4 elC">Title C</div>
    
    <div class="col-sm-4 elA">Graph A</div>
    <div class="col-sm-4 elB">Graph B</div>
    <div class="col-sm-4 elC">Graph C</div>
    
    <div class="col-sm-12 elA">List A</div>
    <div class="col-sm-12 elB">List B</div>
    <div class="col-sm-12 elC">List C</div>
</div>

CSS

.row > div {
    margin-bottom: 10px;
    border: 1px solid #000;
}

.elA { background-color: #E99048; }
.elB { background-color: #B0C07E; }
.elC { background-color: #B0B9DC; }

@media (max-width: 500px) {
    .row {
        display: flex;
        flex-flow: row wrap;
    }
    
    .elA {
        order: 1;
    }
    
    .elB {
        order: 2;
    }
    
    .elC {
        order: 3;
    }
}