JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="reverse-order">
    <div class="row first-row">
        <div class="col-xs-6">
            Col-1
        </div>
        <div class="col-xs-6">
            Col-2
        </div>
    </div>
    <div class="row second-row">
        <div class="col-xs-6">
            Col-3
        </div>
        <div class="col-xs-6">
            Col-4
        </div>
    </div>
</div>

CSS

.first-row {
    background: blue;
}

.second-row {
    background: red;
}

.reverse-order {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}

.reverse-order > div,
.reverse-order > span,
.reverse-order > li {
    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    transform: scaleY(-1);
}