JSFiddle - React, Tailwind, and code Playground

by Arshad Muhammed

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="col-md-10 float">
    <div class="col-md-8 col-md-offset-4 hidden-sm hidden-xs">Text box overlapping images on large screens</div>
</div>
<div class="col-md-12 hai2 hidden-md hidden-lg">Full width text box on small screens</div>
<div class="col-md-2 col-xs-6"></div>
<div class="col-md-2 col-xs-6 hai"></div>

CSS

.col-md-10{background:url('http://images.all-free-download.com/images/graphiclarge/blue_abstract_background_310971.jpg');background-size:cover;height:200px;padding-right:0px!important;}
.col-md-8{background:yellow;height:100px;}
.col-md-2{background:blue;height:100px;}
.hai{background:green;height:100px;}
.hai2{background:yellow;height:100px;}