html - Bootstrap-行跨列但保持响应

我正在尝试创建一个基于引导的时间表，我希望它能够跨设备响应，但这比我想象的要难一些。
在较大的设备上，布局应如下所示，其中有3个并行会话，但小时槽在列之间相互对齐：

这与移动视图不同，在移动视图中，列彼此位于下方，并且忽略水平对齐：

我确实尝试在每一列使用一个表，但很快意识到这个想法是有缺陷的。其他各种使柱具有相同高度的尝试也失败了。
更大的问题是每个单元格的内容可能会有很大的变化。

最佳答案

你试过嵌套列吗？您可以放置一行三列，然后在这些列中嵌套其他div。Here's a Bootply。可以看到mobile中的列堆栈。下面是代码，相对简单：

<div class="container">

    <div class="row">
      <div class="col-xs-12 col-md-4">
        <div class="col-xs-12 col-top"></div>
        <div class="col-xs-12 col-left"></div>
        <div class="col-xs-12 col-left"></div>
        <div class="col-xs-12 col-left"></div>

      </div>
      <div class="col-xs-12 col-md-4">

        <div class="col-xs-12 col-top"></div>
        <div class="col-xs-12 col-mid"></div>
        <div class="col-xs-12 col-mid"></div>
        <div class="col-xs-12 col-mid"></div>

      </div>
      <div class="col-xs-12 col-md-4">

          <div class="col-xs-12 col-top"></div>
          <div class="col-xs-12 col-right"></div>
          <div class="col-xs-12 col-right"></div>
          <div class="col-xs-12 col-right"></div>

      </div>
    </div>


</div>

更新以适应白色块。在一个大屏幕上，你可以看到我刚刚用css将空块变成白色，当你在mobile中查看它时，这些块被隐藏起来。Here's the updated Bootply，这是密码。

<div class="container">
    <div class="row">
      <div class="col-xs-12 col-md-4">
        <div class="col-xs-12 col-top"></div>
        <div class="col-xs-12 col-left"></div>
        <div class="col-xs-12 col-mid visible-lg" id="white"></div>
        <div class="col-xs-12 col-left"></div>
      </div>
      <div class="col-xs-12 col-md-4">
        <div class="col-xs-12 col-top"></div>
        <div class="col-xs-12 col-mid visible-lg" id="white"></div>
        <div class="col-xs-12 col-mid"></div>
        <div class="col-xs-12 col-mid visible-lg" id="white"></div>
      </div>
      <div class="col-xs-12 col-md-4">
          <div class="col-xs-12 col-top"></div>
          <div class="col-xs-12 col-topright"></div>
          <div class="col-xs-12 col-bottomright"></div>
      </div>
    </div>
</div>