私は水平のテーブルをしたブートストラップ

Question

ターゲット
とモバイルで一緒の​​複数を包みます。デスクトップビューとモバイルビューを作成しました。モバイルビューでは、すべての情報がeatchの下に表示され、デスクトップ上ではすべての情報が相互に表示されます。
これは、それはのようになります方法です。
デスクトップ
モバイル

私の現在の状態
私はブートストラップで動作します。私はテーブルレイアウトを作って、それがデスクトップ上でどうなるべきかを見ています。私はモバイルにサイズを変更した場合、情報は、お互いの下にラップしませんが、デスクトップビューでのように水平滞在：

Codepen-Demo of current solution
とCodepen（ノート、私はブートストラップを使用するので、私からのコード）SO-生成されたビューが適切であるとは思わない：
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ですべてを作りました。
  結果：レイアウトスイッチは機能しましたが、円&がもう機能しませんでした。そして、私はテーブルのレイアウトがより保守性が良いと思います。
• ブートストラップでテーブルセルをラップしたが、ワードラップだけが検出され、全体が<td>ではありませんでした。

質問
あなたはお互いの下にすべての<td>年代をラップするために、私の目標を達成するために私を助けることができますか？私はアイデアがありません。
解決方法は他にもありますが、私にはその制限があります。
ブートストラップで行うか、少なくともブートストラップで作業する必要があります。
レイアウトは、ターゲットセクションに表示されるようにする必要があります。私はこのレイアウトについて何か変更することはできません。

私はCSS3を使用することができます。JavaScriptなしで動作するのであればうれしいでしょう。ただし、可能な場合はJSも含めることができます。

Answer 1

問題の最良の解決策ではないかもしれませんが、私の意見では、コード内の可能な変更を最小限に抑え、ブートストラップのクラスを利用するだけで解決します。

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