How to make a tall div on the right side of bootstrap layout? -


I think I'm losing some simplicity here.

I have it: Enter image details here

This is what I need: Enter image details here

Code: (at the top See the codepen)

  & lt; Div class = "container" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-md-2" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-6 sm-tile" & gt; A & lt; / Div & gt; & Lt; Div class = "col-xs-6 sm-tile" & gt; B & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-12 sm-tile" & gt; C & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-2 tile" & gt; D & lt; / Div & gt; & Lt; Div class = "col-md-6 tile" & gt; E & lt; / Div & gt; & Lt; Div class = "col-md-2 lg-tile" & gt; F & lt; / Div & gt; & Lt; Div class = "col-md-2 tile" & gt; G & lt; / Div & gt; & Lt; Div class = "col-md-8 tile" & gt; H & lt; / Div & gt; & Lt; Div class = "col-md-10 tile" & gt; I & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; [Class * = "call-"] {boundary: 1 px solid red; } .sm-tile {height: 100px; } .lg-tile {height: 600px; }. Tile {height: 200px; }  

something like that?

  & lt; Div class = "container" & gt; & Lt; Div class = 'row' & gt; & Lt; Div class = 'col-md-10' & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-md-2" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-6 sm-tile" & gt; A & lt; / Div & gt; & Lt; Div class = "col-xs-6 sm-tile" & gt; B & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "col-xs-12 sm-tile" & gt; C & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-2 tile" & gt; D & lt; / Div & gt; & Lt; Div class = "col-md-8 tile" & gt; E & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = 'row' & gt; & Lt; Div class = "col-md-4 tile" & gt; G & lt; / Div & gt; & Lt; Div class = "col-md-8 tile" & gt; H & lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = 'row' & gt; & Lt; Div class = "col-md-12 tile" & gt; I & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "col-md-2 lg-tile" & gt; F & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

Plunker available here:


Comments

Popular posts from this blog

sqlite3 - UPDATE a table from the SELECT of another one -

c# - Showing a SelectedItem's Property -

javascript - Render HTML after each iteration in loop -