css - Bootstrap ，4 个 div，2 列。一栏不向右浮动

Question

使用我的 codepen 可能更容易让人们理解。

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

基本上我有四个 div。 (技术上是 5，但第五个是隐藏的，旨在在响应时交换第 3 和第 4 个 div 的顺序。)但是这 4 个 div 在两列中。问题是，当右侧的顶部 div 变得比左侧的两个 div 大(高度)时，右侧的底部 div 会滑到左侧。但是，如果发生这种情况，我只想在左侧留有空白。

这是我的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>

这是我的CSS

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

因此，从本质上讲，我希望营业时间 div 保持在“开放乘车”div 之下。

有没有人有什么想法？

Answer 1

将 col-sm-offset-8 应用于您的营业时间 div，它应该可以解决问题。