Bootstrap pulled column wrapping

Question

I have a layout challenge that seems to be impossible to solve with the bootstrap grid system. But maybe I am wrong? In the two response steps md and lg the desired layout is:

md:

lg:

I have tried and contemplated about this a lot, but I didn't get closer than my intuitive 1st way of going about it:

<div id="main" class="container">
    <div class="row">
        <div class="col-lg-12 col-md-9 blue"></div>
        <div class="col-md-9 col-md-push-3 col-lg-push-0 green"></div>
        <div class="col-md-3 col-md-pull-9 col-lg-pull-0 red"></div>
    </div>
</div>

Which of course is fine on lg, but leaves me with this at md:

You would think that the red block would wrap next to the blue, as desired.

The only way I could think of right now would be to stop pushing and pulling the cols and instead give the red block a negative margin-top in md. But that feels dirty, or to not use bootstraps grid here and solve it through other means, which would be a bummer.

Also it has to be IE8 compatible... ;)

Answer 1

You just need to move the red div between the blue and green (IE swap the red and green divs), and then modify your push pulls so that the red sits properly next to the blue on large screens and it swaps positions with the green div on medium screens.

Something like this should work:

<div id="main" class="container">
    <div class="row">
        <div class="col-lg-12 col-md-9 blue"></div>
        <div class="col-lg-3 col-lg-push-9 col-md-3 red"></div>
        <div class="col-lg-9 col-md-9 green col-lg-pull-3"></div>
    </div>
</div>

Also, so the red takes up its full height, add a float to it for just that size only:

@media all and (min-width: 992px) and (max-width:1200px) {
    .red{
        float:right;
    }
}

Hope this helps!

*Edit: Here is a JSFiddle to for reference.

Answer 2

I think I solved it:

<div class="blue col-lg-12 col-md-9" style="padding:0;margin:0;background:blue;height:500px;">
</div>
<div class="green col-md-9 col-lg-9"     style="padding:0;margin:0;background:green;height:500px;"></div>
    <div class="red col-md-pull-9 col-lg-pull-3" style="padding:0;margin:0;background:red;height:1000px;"></div>

https://jsfiddle.net/beardedmike/b69hnh9r/2/