Как быстро изменить порядок столбцов таблицы ⇐ CSS

[Anonymous]

Я пытаюсь создать такую ​​адаптивную таблицу:
[img]https://i.sstatic .net/Wi8qCWfw.png[/img]

Есть шесть столбцов (от D1 до D6); на рабочем столе они все находятся в одной строке.
На мобильных устройствах я хочу, чтобы D2 находился на первой позиции и был больше (2 ряда), D3 во второй позиции должен занимать всю ширину внизу ( только одна строка) и D1 только одна строка (одна вверху слева), а D4, D5, D6 должны быть в правом верхнем углу только с одной строкой. (См. изображение выше.)
Пока я просто создаю две строки для каждого устройства и скрываю одну с помощью JavaScript, но мне интересно, есть ли лучший способ сделать это с помощью CSS.
Я не знаю, почему заголовок шестого столбца движется, и я не могу прикрепить D1 вверху слева и D4, D5, D6 вверху. верно.
Вот что я уже есть:

Код: Выделить всё

table {
width: 100%;
border-collapse: collapse;
}

th,
td {
border: 1px solid black;
padding: 8px;
text-align: left;
}

.col1 {
background-color: #f2f2f2;
}

.col2 {
background-color: #e6f2ff;
}

.col3 {
background-color: #f2e6ff;
}

.col4 {
background-color: #ffffcc;
}

.col5 {
background-color: #e6ffe6;
}

.col6 {
background-color: #ffe6e6;
}

tr.ligne {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-gap: 0px;
}

@media only screen and (max-width: 500px) {

tr.ligne {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

tr.ligne>td:nth-child(1) {
order: 2;
}

tr.ligne>td:nth-child(2) {
order: 1;
grid-row: 1 / 3;
}

tr.ligne>td:nth-child(3) {
order: 6;
grid-row: 2 / 2;
grid-column: 2 / 6;
}

tr.ligne>td:nth-child(4) {
order: 3;
}

tr.ligne>td:nth-child(5) {
order: 4;
}

tr.ligne>td:nth-child(6) {
order: 5;
}

tr:nth-of-type(2) td {
color: pink;
}
}

Код: Выделить всё

HTML Table



Un
Deux
Trois
Quatre
Cinq
Six


Row 1, Col 1
Row 1, Col 2
Row 1, Col 3
Row 1, Col 4
Row 1, Col 5
Row 1, Col 6


Row 2, Col 1
Row 2, Col 2
Row 2, Col 3
Row 2, Col 4
Row 2, Col 5
Row 2, Col 6


Row 3, Col 1
Row 3, Col 2
Row 3, Col 3
Row 3, Col 4
Row 3, Col 5
Row 3, Col 6


Row 4, Col 1
Row 4, Col 2
Row 4, Col 3
Row 4, Col 4
Row 4, Col 5
Row 4, Col 6


Row 5, Col 1
Row 5, Col 2
Row 5, Col 3
Row 5, Col 4
Row 5, Col 5
Row 5, Col 6

Подробнее здесь: https://stackoverflow.com/questions/792 ... ive-manner