Css 是否可以使用引导在每列中有不同大小的行？如果是，怎么做？

所以我现在的处境是，我有四个div。两个div必须位于屏幕右侧，两个div必须位于左侧。我不能在另一个div中捆绑两侧的两个，因为当它们在移动视图中响应时，它们的定位需要网状。（在“移动视图”中查看笔，您将了解我的意思）

这是代码，html在这里

<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 We have</div>
<div class="col-sm-4 hours">Hours of Operation</div>

和一支笔作插图之用

---

这里的问题是，最上面的两个div经常改变大小。由于bootstrap的行内联特性，它在div中创建了空格。因此，如果一列顶部的div是高的，则第二列底部的div将从高的div离开的位置开始，而不是从第二列顶部div离开的位置开始，在每列之间留下空白。（一定要看看这支笔，你就会明白我在处理什么）我不能有任何空白。我需要每列中每一行的大小彼此独立——因为我使用的是引导，所以我不确定这是否可行。有人有什么想法吗？

使用Bootstrap无法立即实现您想要实现的目标，因为在响应视图中，div相互折叠的方式。为了说明这一点，使用Bootstrap很容易做到：

1    |    2
3    |    4

1    |    2
3    |    4

为此：

1
2
3
4

1
3
2
4

5
1
2
3
4 (hidden)

这也很容易做到：

为此：

1
2
3
4

1
3
2
4

5
1
2
3
4 (hidden)

但看起来你要做的是：

4
1
2
3

语义HTML将从左到右、从上到下读取。最好的方法是利用Bootstrap，它允许您执行以下操作：

 5 (hidden)
1    |    2
3    |    4

为此：

1
2
3
4

1
3
2
4

5
1
2
3
4 (hidden)

---

通过应用

隐藏-*

类。看这个。此外，您可以通过将页面按语义分成两半（两列），然后在该列中将每个块作为一个div来消除列中行与行之间的空间。

在这种情况下，图片所表达的远不止文字。请在你的问题中加入你想要达到的目标的图像。哇…太棒了！非常感谢你！这对我来说是值得奋斗的一天，所以我真的很感激！