JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="row">
    <div class="a col-xs-10 col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of A</div>
    <div class="b col-xs-9  col-sm-12 col-md-6 col-lg-6 col-lg-pull-6 col-md-pull-6">Content of B</div>
    <div class="c col-xs-8  col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of C</div>
    <div class="clearfix visible-md-block visible-lg-block"></div>
    <div class="d col-xs-7  col-sm-12 col-md-6 col-lg-6 col-lg-push-6 col-md-push-6">Content of D</div>
</div>

CSS

div.a
{
    background-color: #00F;
}
div.b
{
    background-color: #0F0;
}

div.c
{
    background-color: #F00;
}

div.d {
    background-color: #FF0;
}