CODEWITHSUNDEEP
csstwitter-bootstrap
kdweber89
kdweber89

Reputation: 2174

bootstrap, 4 divs, 2 columns. One column not floating right

It may be easier for ppl to understand with my codepen.

http://codepen.io/KDweber89/pen/LVddKK

Basically I have four divs. (technically 5 but the fifth is hidden, and designed to swap the order of the 3rd and 4th div when responsive.) But these 4 divs are in two columns. The problem is that when the top div on the right side becomes larger (height wise) than the two divs on the left side combined, the bottom div on the right side slides over to the left side. However I just want white space on the left side if this effect happens.

here is my html

<div class="col-xs-12 col-sm-8 start">Start ride For</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 conditions ">rides We have</div>
<div class="col-xs-12 col-sm-4 pull-right hours">Hours of Operation</div>

Here is my css

.start { height: 50px; background: #fcc; }
.open { height: 250px; background: #fdb; }
.hours { height: 50px; background: #ffb; }
.hidden { height: 50px; }
.conditions { height: 150px; background: #cfc; }

So essentially, I want the hours of operation div to remain underneath the 'open ride' div.

Does anybody have any ideas?

Upvotes: 0

Views: 684

Answers (1)

Blkc
Blkc

Reputation: 612

Apply col-sm-offset-8 to your Hours of Operations div and it should do the trick.

Upvotes: 1

Related Questions