總結多個​​的移動與自舉

Question

目標
我有一個水平表。我創建了一個桌面視圖和一個移動視圖。在移動視圖中，所有信息均在桌面上顯示在eatch下，每個信息都顯示在彼此旁邊。
這是應該的樣子：
桌面
移動

我現在的狀態
我與引導工作。我做了一個表格佈局，看起來應該如何在桌面上。如果我把它調整到移動，該信息將不包互相下方，但在桌面視圖停留水平，如：

Codepen-Demo of current solution
而從Codepen代碼（注意，我用的引導，所以我不認爲如此產生的視圖適合）：
HTML

<table class="table table-striped borderless"> 
<tr> 
    <td class="col-xs-2">06:33</td> 
    <td class="col-xs-1 circle-td"> 
     <span class="circle"><p>2h 55'</p></span> 
    </td> 
    <td class="col-xs-3"><strong>Drive</strong></td> 
    <td class="col-xs-3">18922</td> 
    <td class="col-xs-3">Home - Stop</td> 
</tr> 
<tr> 
    <td class="col-xs-2">06:33</td> 
    <td class="col-xs-1 circle-td"> 
     <span class="circle"><p>2h 55'</p></span> 
    </td> 
    <td class="col-xs-3"> 
     <small>Inbetween</small><br /> 
     <strong>Snack</strong> 
    </td> 
    <td class="col-xs-3">18922</td> 
    <td class="col-xs-3">Stop</td> 
</tr> 
<tr> 
    <td class="col-xs-2">06:33</td> 
    <td class="col-xs-1 circle-td"> 
     <span class="circle"><p>2h 55'</p></span> 
    </td> 
    <td class="col-xs-3"><strong>Drive</strong></td> 
    <td class="col-xs-3">18922</td> 
    <td class="col-xs-3">Stop - End</td> 
</tr> 

CSS

.table.borderless>tbody>tr>td{ 
    border-top: none; 
} 
.circle-td{ 
    background: #fff; 
    background: linear-gradient(180deg, transparent, #353535, transparent); 
    background-position: 50%; 
    background-repeat: repeat-y; 
    background-size: 1px auto;  
    text-align: center; 
} 

.circle{ 
    border: 1px solid black; 
    text-align: center; 
    display: table; 
    padding: 5px; 
    margin: 0 auto; 
    -webkit-border-radius: 50%; 
    -moz-border-radius: 50%; 
    border-radius: 50%; 
    line-height: 12px; 
    height: 40px; 
    width: 40px; 
    border-collapse: separate; 
    background: white; 
} 
.circle p{ 
    display: table-cell; 
    width: 100%; 
    height: 100%; 
    vertical-align: middle; 
    text-align: center; 
} 

我已經試過
我想多醜陋的東西：

• 的內容TD內部創建一個表。
  結果：整個佈局搞砸了
• 用div而不是固定表做了一切。
  結果：佈局切換工作，但圓圈&行不再工作。我認爲，桌面佈局更易於維護。
• 搜索使用Bootstrap包裝表格單元，但只發現包裝字符而不是整個<td>的s。

問題
你能幫助我達到我的目標，以包所有<td>的相互底下？我沒有想法。
您也可以向我展示解決方案的其他方式，我只有這些限制：
它必須使用Bootstrap完成，或者至少使用bootstrap。
佈局必須如目標部分所示。我無法改變這個佈局的一些東西。

我可以使用CSS3，如果沒有JavaScript，我會很高興;但如果只有可能，我也可以包含JS。

Answer 1

也許這不是問題的最佳解決方案，但在我看來，它會在代碼中儘可能少地改變並且只使用Bootstrap的類來解決問題。

.table.borderless>tbody>tr>td{ 
 
    border-top: none; 
 
} 
 
.circle-td{ 
 
    background: #fff; 
 
    background: linear-gradient(180deg, transparent, #353535, transparent); 
 
    background-position: 50%; 
 
    background-repeat: repeat-y; 
 
    background-size: 1px auto;  
 
    text-align: center; 
 
} 
 

 
.circle{ 
 
    border: 1px solid black; 
 
    text-align: center; 
 
    display: table; 
 
    padding: 5px; 
 
    margin: 0 auto; 
 
    -webkit-border-radius: 50%; 
 
    -moz-border-radius: 50%; 
 
    border-radius: 50%; 
 
    line-height: 12px; 
 
    height: 40px; 
 
    width: 40px; 
 
    border-collapse: separate; 
 
    background: white; 
 
} 
 
.circle p{ 
 
    display: table-cell; 
 
    width: 100%; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<table class="table table-striped borderless"> 
 
    <tr> 
 
    <td class="col-xs-2">06:33</td> 
 
    <td class="col-xs-1 circle-td"> 
 
     <span class="circle"><p>2h 55'</p></span> 
 
    </td> 
 
    <td class="col-xs-9"> 
 
     <div class="col-sm-4"> 
 
     <strong>Drive</strong> 
 
     </div> 
 
     <div class="col-sm-4">18922</div> 
 
     <div class="col-sm-4">Home - Stop</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="col-xs-2">06:33</td> 
 
    <td class="col-xs-1 circle-td"> 
 
     <span class="circle"><p>2h 55'</p></span> 
 
    </td> 
 
    <td class="col-xs-9"> 
 
     <div class="col-sm-4"> 
 
     <small>Inbetween</small><br /> 
 
     <strong>Snack</strong> 
 
     </div> 
 
     <div class="col-sm-4">18922</div> 
 
     <div class="col-sm-4">Stop</div> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="col-xs-2">06:33</td> 
 
    <td class="col-xs-1 circle-td"> 
 
     <span class="circle"><p>2h 55'</p></span> 
 
    </td> 
 
    <td class="col-xs-9"> 
 
     <div class="col-sm-4"> 
 
     <strong>Drive</strong> 
 
     </div> 
 
     <div class="col-sm-4">18922</div> 
 
     <div class="col-sm-4">HStop - End</div> 
 
    </td> 
 
    </tr> 
 

 
</table>