Bootstrap 3 - Move item up from the row below

Question

I have three sections on my site; lets call them V, D and H. On large screen display this looks like:

vvvdd
vvvdd
vvvdd
hhhhh
hhhhh

However on medium desktop it looks like this, with a load of white space:

vvvd
vvvd
vvvd
   d
   d
   d
hhh
hhh
hhh

How do I move the H block up on desktop view to fill the space?

vvvd
vvvd
vvvd
hhhd
hhhd
hhhd

I'm using Bootstrap 3.

For reference, here's the site: http://garemoko.github.io/hosanna/kids/

Answer 1

I think you can try to achieve it with a combination of bootstrap grid classes and custom positioning. For example:

<div class="container">
    <div class="row">
        <div class="v col-sm-7 col-xs-9">V</div>
        <div class="d col-sm-5 col-xs-3">D</div>
        <div class="h col-sm-12 col-xs-9">H</div>
    </div>
</div>

CSS:

.row {
    position: relative;
}
.row .d {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
}

I used col-xs- and col-sm- classes for demo, you may need to change them accordingly.

Demo: http://plnkr.co/edit/Oez9D58JhHcwMdyWLZXU?p=preview