css - Is it possible to use bootstrap to have different sized rows per column? if so, how? -

so in situation have 4 divs. 2 divs need on right side of screen, , 2 need on left side. cannot bundle 2 on each side within div because when responsive in mobile view positioning needs webbed. (check out pen in mobile view, , you'll see mean)

this code, html here

<div class="col-xs-12 col-sm-8 start">start ride </div> <div class="col-xs-12 col-sm-4 pull-right open">open ride</div> <div class="hidden-xs hidden-sm"></div> <div class="col-xs-12 col-sm-8 pull-left rides ">rides have</div> <div class="col-sm-4 hours">hours of operation</div> 

with css

.start { height: 125px; background: #fcc; } .open { height: 95px; background: #fdb; } .hours { height: 50px; background: #ffb; } .rides { height: 150px; background: #cfc; } 

and pen illustration purposes http://codepen.io/kdweber89/pen/lvddkk?editors=110

the problem here that, top 2 divs change sizes. because of bootstrap's inline features rows, creates white spaces within divs. if div on top of 1 column tall, bottom div on second column begin tall 1 left off, rather the top div on second column leaving white space between each column. (definitely check out pen, , you'll see dealing with) cannot have of white spaces. need sizes of each row in each columns independent of each other -- , because i'm using bootstrap, i'm not sure if possible. have ideas?

what you're trying accomplish isn't instantly possible bootstrap, because of way have divs folding in each other in responsive view. illustrate, it's easy bootstrap go this:

1    |    2 3    |    4 

to this:

1 2 3 4 

it easy go this:

1    |    2 3    |    4 

to this:

1 3 2 4 

but looks you're trying this:

4 1 2 3 

semantic html read left right, , top bottom. best way go taking advantage of bootstrap's responsive utilities, allow this:

 5 (hidden) 1    |    2 3    |    4 

to this:

5 1 2 3 4 (hidden) 

by applying hidden-* classes. see codepen based on yours. furthermore, can rid of space between rows in column dividing page semantically in half (two columns) , making each block div inside column.