Creating a Bootstrap fluid different-height-elements grid - html

Question

I'm trying to get a simple grid-like webpage done where there are 8 DIVs spanning across 9 positions.
I've done the following for another part of the website using Bootstrap's grid system without running into any kind of issue (Not the actual content, just a mockup using Photoshop)
What I want to do is this:
Having in mind that when the site is viewed in a mobile device, the order of the elements must be more-or-less preserved. Also Bootstrap standard margins/paddings must be used
Ideally this would be fixed-height DIVs inside of which I'll put an image or some text, depending on which one. The double-height one will contain a picture
<div class="wrapper" id="mypage">
<section class="grid-container service">
<ul class="small-grid grid-col-3">
<li class="col-3">
<div id="subtitle">
SUBTITLE 1
</div>
</li>
<li class="col-3">
<div id="title">
TITLE
</div>
</li>
<li class="col-3">
<div id="subtitle">
SUBTITLE 2
</div>
</li>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../1.jpg')">
</li>
</a>
<a href="">
<li class="col-3 img-dynamic-size" style="background-image: url('../2.jpg')">
</li>
</a>
Sample code of the 1st screen
Thank you, I can't figure out how to do it after thinking about it for some time...

Answer 1

Okay.. I think I'm following you, I've just drawn up some sample bootstrap code for you to see what I'm talking about. You can achieve this look by just stripping out relevant padding/margin and using the Bootstrap equal-height columns experiment
I have just stripped out all relevant margin and padding on the nested rows in the example but you can obviously play with these values only cancelling out or amending the vertical/horizontal margin/padding as required for your own use.
HTML
<div class="container">
<div class="row">
<div class="col-xs-4 border">
<div id="subtitle">SUBTITLE 1</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
<div class="col-xs-4 border">
<div id="title">TITLE</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-xs-8 nopadding">
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content...</div>
<div class="col-xs-6 nomargin border">Some More Content...</div>
</div>
<div class="row nomargin">
<div class="col-xs-6 nomargin border">Some Content Below...</div>
<div class="col-xs-6 nomargin border">Some More Content Below...</div>
</div>
</div>
<div class="col-xs-4 border">Content matching height using the 'row-eq-height' class</div>
</div>
CSS
.nomargin {
margin:0;
}
.nopadding {
padding: 0;
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.border {
border: 1px solid red;
min-height: 50px;
}
You can see a jsFiddle here