在移动设备上与 bootstrap 一起收集多个 <td>

Question

目标
我有一个水平的 table。我创建了一个桌面视图和一个移动视图。在移动视图中，所有信息都显示在 etatch other 下，而在桌面上，每条信息都显示在彼此旁边。
它应该是这样的：
桌面
手机

我现在的状态
我和 Bootstrap 一起工作。我做了一个 table 布局，它在桌面上看起来应该如何。如果我将其调整为移动设备，信息将不会相互重叠，而是像在桌面视图中一样保持水平：

Codepen-Demo of current solution
以及来自 Codepen 的代码（注意，我使用 Bootstrap，所以我认为 SO 生成的视图不是 suitable）：
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;
}

我试过的
我尝试了很多丑陋的东西：

在 content-TD 内创建另一个 table。
结果：整个布局乱七八糟
用 div 而不是固定的 table 制作所有东西。
结果：布局开关起作用了，但圆圈和线不再起作用了。而且我认为，table 布局更易于维护。
用 Bootstrap 搜索了 table 单元格的换行，但只找到了换行而不是整个 <td>。

问题
你能帮我达到我的目标，把所有 <td> 都包起来吗？我没主意了。
您也可以告诉我其他解决方法，我只有这些限制：
必须使用 Bootstrap 完成或至少使用 bootstrap.
布局必须与 Target 部分中显示的一样。我无法更改此布局。

我可以使用 CSS3，如果没有 JavaScript 也能正常工作，我会很高兴；但如果可能的话，我也可以包括 JS。

Answer 1

可能这不是问题的最佳解决方案，但在我看来，它将以尽可能少的代码更改并仅利用 Bootstrap 的类.[= 来解决问题。 12=]

.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>

在移动设备上与 bootstrap 一起收集多个 <td>

Wrap up multiple <td>'s together on mobile with bootstrap

twitter-bootstrap

css

css-tables