表が崩壊し、アコーディオン

Question

に示す次のように私は、ブートストラップのテーブルを持っている：

<table class="table table-striped"> 
<thead> 
<tr> 
    <th>Date</th> 
    <th>Name</th> 
    <th>LastName</th> 
    <th>Color</th> 
    <th>Car</th> 
    <th>Year</th> 
    <th>Price</th> 

</tr> 
</thead> 
<tbody> 
<tr> 
    <td>01/02/2017</td> 
    <td>Dan</td> 
    <td>Green</td> 
    <td>Blue</td> 
    <td>BMW</td> 
    <td>2016</td> 
    <td>100k</td> 
</tr> 
    <tr> 
    <td>01/02/2017</td> 
    <td>Dan</td> 
    <td>Green</td> 
    <td>Blue</td> 
    <td>BMW</td> 
    <td>2016</td> 
    <td>100k</td> 
</tr> 
    <tr> 
    <td>01/02/2017</td> 
    <td>Dan</td> 
    <td>Green</td> 
    <td>Blue</td> 
    <td>BMW</td> 
    <td>2016</td> 
    <td>100k</td> 
</tr> 
    <tr> 
    <td>01/02/2017</td> 
    <td>Dan</td> 
    <td>Green</td> 
    <td>Blue</td> 
    <td>BMW</td> 
    <td>2016</td> 
    <td>100k</td> 
</tr> 
    <tr> 
    <td>01/02/2017</td> 
    <td>Dan</td> 
    <td>Green</td> 
    <td>Blue</td> 
    <td>BMW</td> 
    <td>2016</td> 
    <td>100k</td> 
</tr> 

</tbody> 
</table> 

私が何をしたいのか、ブレークポイントに、小さな画面を言うということです768pxよりも、このようにテーブルを表示しますクリックで、その後

DATE:01/05/2017 
car:BMW 

そして、この行に表示する：

Name:Dan 
LastName:Green 
Color:blue 
Year:2016 

ブートストラップでこれを達成する方法はありますか？ 多分、テーブルにすべてを持たず、リストに要素を入れ、テーブル（セル）として表示し、それらを整列させるために小さな画面に表示すべきですか？ 私はこのようにする方法を知らないので、最初は2つのビューを作成し、それらを表示/非表示にすることを考えました。 私は初心者ですので、事前にお詫び申し上げます。 ベストプラクティスとその達成方法がわかりません。できればCSSのみを使用してください。 JSはクリックしてその部分を非表示にして表示します。ここで

はjsのフィドルBootstrap Table

すべてのヘルプは高く評価されています。

Answer 1

レイアウトには、ブートストラップグリッドが必要です。 https://getbootstrap.com/docs/4.0/layout/grid/

技術的には「表」ではなくdivを使用し、各画面サイズでdivに必要な列の数を設定します。私がbootstapで始まったとき、私はこの素晴らしいyoutubeチュートリアルでそれをうまく説明しましたが、見ました。https://www.youtube.com/watch?v=g3LRU3JF-rQ