JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://getbootstrap.com/assets/css/docs.css">
<div class="container">
    <div class="row show-grid">
        <div class="col-sm-3">
            LEFT
        </div>
        <div class="col-sm-3 col-sm-offset-6">
            RIGHT
        </div>
    </div>
    <div class="row show-grid">
        <div class="col-xs-12">
            first row
        </div>
    </div>
    <div class="row show-grid">
        <div class="col-xs-12">
            2nd row
        </div>
    </div>
    <div class="row show-grid">
        <div class="col-xs-4 col-sm-1">
		    A
        </div>
        <div class="col-xs-8 col-sm-2 ">
		    B
        </div>
        
        <!-- SEE FOLLOWING LINE FOR IMPORTANT ADDITION! -->
        <div class="clearfix visible-xs"></div>
        
        <div class="col-sm-3">
		    C 12/11
        </div>
        <div class="col-xs-11 col-sm-3">
		    D
        </div>
        <div class="col-xs-11 col-sm-3">
		    Q
        </div>
    </div>
    <div class="row show-grid">
        <div class="col-sm-12">
		    FOOTER
        </div>
    </div>
</div>