Как изменить расположение таблиц в зависимости от разрешения?

Question

Так это ориентирована на IE 10 и 11, и я также использую Bootstrap 3.

Если у меня есть настольный монитор, я хочу, чтобы мой стол, чтобы этот макет:

<table class="table table-responsive"> 
    <thead> 
     <tr> 
     <td>Header 1</td> 
     <td>Header 2</td> 
     <td>Header 3</td> 
     </tr> 
    </thead> 
    <tfoot></tfoot> 
    <tbody> 
     <tr> 
     <td>Data 1</td> 
     <td>Data 2</td> 
     <td>Data 3</td> 
     </tr> 
    </tbody> 
</table> 

На телефон (или другое аналогичное устройство), я хотел бы иметь макет так:

<table class="table table-responsive"> 
    <thead> 
     <tr> 
     <td>Header</td> 
     <td>Data</td> 
     </tr> 
    </thead> 
    <tfoot></tfoot> 
    <tbody> 
     <tr> 
     <td>Header 1</td> 
     <td>Data 1</td> 
     </tr> 
     <tr> 
     <td>Header 2</td> 
     <td>Data 2</td> 
     </tr> 
     <tr> 
     <td>Header 3</td> 
     <td>Data 3</td> 
     </tr> 
    </tbody> 
</table> 

есть ли какие-либо CSS, что позволит мне это сделать? Или это можно сделать только с помощью javascript (и css)?

Чтобы быть ясным, я хочу, чтобы код обнаружил разрешение и отобразил один из двух макетов.

Answer 1

Вы можете создать две таблицы и использовать запросы CSS медиа для переключения между ними, см скрипку https://jsfiddle.net/5f3pbg8b/17/

.table.mobile { 
    display: none 
} 

.table.desktop { 
    display: inline 
} 

@media (max-width: 600px) { 
    .table.desktop { 
    display: none 
    } 
    .table.mobile { 
    display: inline 
    } 
}