Bootstrap - 行跨越列但保持响应

Question

我正在尝试创建一个基于引导程序的时间表，并且我希望它能够跨设备做出响应，但这比我要困难一些。

在较大的设备上，布局应如下所示，包含 3 个并行会话，但时间间隔跨列彼此对齐：

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

我确实尝试在每列中使用一个表格，但很快意识到这个想法是有缺陷的。使列高度相同的各种其他尝试也都失败了。

更大的问题是每个单元格的内容可能会有很大差异。

Answer 1

您是否尝试过嵌套列？您可以放置​​一行三列，然后在这些列中嵌套其他 div。 Here's a 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-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 将空块设置为白色，而当您在移动设备中查看时，这些块被隐藏了。 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>