Responsive layout and column issue

Question

I am trying to achieve this layout with a series of tiled divs on a single line using Bootstrap 3.2.0 for > 768pxwide screens . The height of the div is either single or double, which in this example I set to 50pxand 100px, and div widths is controlled by the class col-sm-x:

My best attempt so far is using the following markup and css:

Css

.red{ background-color: red; }
.blue{ background-color: blue; }
.green{ background-color: green; }
.yellow{ background-color: yellow; }
.purple{ background-color: purple; }

.home-height-single{ min-height: 50px; }
.home-height-double{ min-height: 100px; }

@media (min-width: 768px) {
    .b-col {
        float: right;
    }
}

Markup:

<div class="row">
    <div class="col-sm-6 home-height-double green">
        <p>1</p>
    </div>
    <div class="col-sm-4 home-height-single blue b-col">
        <p>3</p>
    </div>
    <div class="col-sm-2 home-height-single purple b-col">
        <p>2</p>
    </div>
    <div class="col-sm-2 home-height-single green b-col">
        <p>7</p>
    </div>
    <div class="col-sm-4 home-height-double yellow b-col">
        <p>6</p>
    </div>
    <div class="col-sm-2 home-height-single blue">
        <p>4</p>
    </div>
    <div class="col-sm-4 home-height-single red">
        <p>5</p>
    </div>
    <div class="col-sm-2 home-height-single red b-col">
        <p>8</p>
    </div>
</div>

Currently created below, where div 8 does not fill the gap:

JSFiddle - displaying a problem

I know that I could create 2 columns and wrap divs in 2 parent divs, but I want to avoid this. The reason is that in mobile mode I want to place divs 2 and 4 side by side and not stack them, which I don’t think I can do if divs are enclosed in 2 columns.

, , , :

Answer 1

CSS:

@media (min-width: 768px) {
    .row {
        position: relative    
    }
    .b-col {
        float: right;
    }

    .b-col:last-of-type {
        position: absolute;
        bottom: 0;
        right: 0
    }
}

JSFiddle

Answer 2

jQuery

$(function(){ 
    var el = $(".row div:last-child"); 
    el.css('top', el.height() * -1); 
    $( window ).resize(function() {
        if($( window ).width() < 768){
            el.css('top', 0); 
        }else{
            el.css('top', el.height() * -1); 
        };
    });
})

Fiddle

, , CSS.

Answer 3

# 8, (-50px).

http://jsfiddle.net/72vjc/1/

<div style="padding: 30px; color: #ccc;">
<div class="row">
    <div class="col-sm-6 home-height-double green">
        <p>1</p>
    </div>
    <div class="col-sm-4 home-height-single blue b-col">
        <p>3</p>
    </div>
    <div class="col-sm-2 home-height-single purple b-col">
        <p>2</p>
    </div>
    <div class="col-sm-2 home-height-single green b-col">
        <p>7</p>
    </div>
    <div class="col-sm-4 home-height-double yellow b-col">
        <p>6</p>
    </div>
    <div class="col-sm-2 home-height-single blue">
        <p>4</p>
    </div>
    <div class="col-sm-4 home-height-single red">
        <p>5</p>
    </div>
    <div class="col-sm-2 home-height-single red b-col" style="margin-top:-50px">
        <p>8</p>
    </div>
</div>

, , ( col-sm-1), , . .