Loading packaging
I have a layout issue that seems to be impossible to solve with the bootstrap grid. But maybe I'm wrong? In two steps from md and lg's answer, the desired layout is:
microdistrict:
L.G .:
I've tried and pondered a lot about this, but I haven't gotten any closer than my intuitive first way:
<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 is fine on lg of course, but leaves me with this in md:
You would think the red block would be wrapped next to the blue if you wanted.
The only way I could think of now is to stop pushing and pulling decks and instead giving the red box a negative margin-top in the md. But it seems messy or not to use bootstrap grid here and solve it with other means that would be rubble.
Also it should be IE8 compatible ...;)
source to share
You just need to move the red div between blue and green (IE swap red and green divs) and then change your push pulls so that red sits correctly next to blue on large screens, and it changes positions using a green screen 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, red lights up to full height, only adds floats to it for that size only:
@media all and (min-width: 992px) and (max-width:1200px) {
.red{
float:right;
}
}
Hope this helps!
* Edit: Here's a JSFiddle for reference.
source to share
I think I solved:
<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>
source to share