JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div class="row">
    <div class="col-xs-6">6</div>
    <div class="col-xs-6">6</div>
    <div class="col-xs-12 red">12</div>
</div>

CSS

/* To fix this: https://github.com/twbs/bootstrap/issues/10152 */
[class*=col-] + .col-xs-12, [class*=col-] + .col-sm-12, [class*=col-] + .col-md-12, [class*=col-] + .col-lg-12 {
    float: left;
    width: 100%;
}

[class*="col-"] {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #eee;
    border: 1px solid #ddd;
    background-color: rgba(86, 61, 124, .15);
    border: 1px solid rgba(86, 61, 124, .2);
}
.red {
    background-color: #ff0000;
}