Bootstrap - 行跨列但保持響應

Question

我試圖創建一個基於bootstrap的時間表，我希望它跨設備響應，但它比我有點難過。

在較大的裝置中，佈局應與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>