Twitter bootstrap layout - css

Question

I was wondering if someone can help me to work out how to create the below layout using bootstrap.
Large screens the layout is:
and then for small screens the layout would be:
Basically the red will have an image (full height of red box) with and box (yellow) overlapping it. The yellow box will have the same height as the blue box. Then on mobile all four boxes will stack on top of one another.
I've had a play around with the code here:
http://www.bootply.com/6N3RHao0CI
If anyone can help me out it would be appreciated! :-)
Thanks

Answer 1

Well, took me a bit of time, but then I figured out my media queries were smaller than the screensize I was looking at. Turns out I had the solution all along. Of course media sizes are set to what I was tampering with, so do change those to bootstrap sizes.
Settings will have to be changed a bit, but the idea is there.
This is the code used: Bootply link
I gave the div the name floater and gave it the following CSS:
#media(min-width: 1000px) {
.floater {
right: 34%;
position: absolute;
}
}
#media(max-width: 999px) {
.floater {
position: relative;
right: 0px !important;
}
}

Answer 2

Using pure bootstrap. Added some CSS for the sake of demo.
DEMO: http://jsfiddle.net/arshadmuhammed/bkogj3wn/6/
(please don't forget to resize the output screen in fiddle)
HTML
<div class="col-md-10">
<div class="col-md-8 col-md-offset-4 hidden-sm hidden-xs"></div>
</div>
<div class="col-md-12 hai2 hidden-md hidden-lg"></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;
}

Answer 3

The Bootstrap grid is not really made for this design pattern (equal heights and all). If you want something fluid with equal height text boxes on the right (for the larger viewports), I would roll my own using display:table and table-cell.
DEMO: https://jsbin.com/hufasa
HTML
<div class="hero-feature">
<div class="hero-image">
<div class="intro-text">Text box</div>
</div>
<!-- /.hero-image -->
<div class="feature-box-wrapper">
<div class="feature-box blue">
<div>text</div>
</div><!-- /.feature -->
<div class="feature-box green">
<div>text</div>
</div><!-- /.feature-box -->
</div><!-- /.feature-box-wrapper -->
</div><!-- /.hero-feature -->
CSS
.hero-feature .hero-image {
background-image: url(http://placekitten.com/g/500/500);
background-size: cover;
background-position: center top;
padding-top: 50%;
}
.hero-feature .intro-text {
background: gold;
padding: 5%;
}
.hero-feature .feature-box {
padding: 5%;
color: #fff;
float: left;
width: 50%;
}
.hero-feature .blue {
background-color: blue
}
.hero-feature .green {
background-color: green
}
#media (min-width:768px) {
.hero-feature {
display: table;
width: 100%;
}
.hero-feature .intro-text {
position: absolute;
top: 0;
right: 0;
padding: 5%;
width: 70%;
}
.hero-feature .hero-image {
display: table-cell;
background-image: url(http://placekitten.com/g/500/500);
background-size: 100.5%;
/*disquise the rounding errors in many browsers */
background-position: center center;
height: 400px; /*height of the image*/
padding: 0;
position: relative;
}
.hero-feature .feature-box-wrapper {
display: table-cell;
width: 30%;
}
.hero-feature .feature-box {
display: table;
height: 50%; /* half the height of the .hero-image */
width: 100%;
vertical-align: middle;
float: none;
}
.hero-feature .feature-box > div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
}
Everything not shared by all viewport sizes goes outside the media query.