How to reorder table's columns in a responsive manner

I am trying to make a responsive table like this:

There are six columns (D1 to D6); on desktop they are all in the same row.

On mobile I want D2 to be in first position and bigger (2 row) D3 in second position should take all the width in the bottom (only one row) and D1 only one row (one the top left) and D4, D5, D6 should be on the top right with only one row. (See image above.)

For now I just make two rows for each device and I hide one with JavaScript, but I wonder if there is a better way to do it with CSS.

I don't know why the sixth column's head is moving, and I can't stick D1 to the top left and D4, D5, D6 to the top right.

Here is what I have so far:

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;
  }
}

<h2>HTML Table</h2>

<table>
  <tr class="ligne">
    <th>Un</th>
    <th>Deux</th>
    <th>Trois</th>
    <th>Quatre</th>
    <th>Cinq</th>
    <th>Six</th>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 1, Col 1</td>
    <td class="col2">Row 1, Col 2</td>
    <td class="col3">Row 1, Col 3</td>
    <td class="col4">Row 1, Col 4</td>
    <td class="col5">Row 1, Col 5</td>
    <td class="col6">Row 1, Col 6</td>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 2, Col 1</td>
    <td class="col2">Row 2, Col 2</td>
    <td class="col3">Row 2, Col 3</td>
    <td class="col4">Row 2, Col 4</td>
    <td class="col5">Row 2, Col 5</td>
    <td class="col6">Row 2, Col 6</td>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 3, Col 1</td>
    <td class="col2">Row 3, Col 2</td>
    <td class="col3">Row 3, Col 3</td>
    <td class="col4">Row 3, Col 4</td>
    <td class="col5">Row 3, Col 5</td>
    <td class="col6">Row 3, Col 6</td>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 4, Col 1</td>
    <td class="col2">Row 4, Col 2</td>
    <td class="col3">Row 4, Col 3</td>
    <td class="col4">Row 4, Col 4</td>
    <td class="col5">Row 4, Col 5</td>
    <td class="col6">Row 4, Col 6</td>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 5, Col 1</td>
    <td class="col2">Row 5, Col 2</td>
    <td class="col3">Row 5, Col 3</td>
    <td class="col4">Row 5, Col 4</td>
    <td class="col5">Row 5, Col 5</td>
    <td class="col6">Row 5, Col 6</td>
  </tr>
</table>

Solution

If we take your HTML structure, your CSS and media querie should be more alike :

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

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

.col1 {
  background-color: #E3512A;
}

.col2 {
  background-color: #D4D4D4;
}

.col3 {
  background-color: #906D6B;
}

.col4 {
  background-color: #8E5AF6;
}

.col5 {
  background-color: #4450F5;
}

.col6 {
  background-color: #86F860;
}

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

@media only screen and (max-width: 800px) {/* reset max-width to your needs */
  tr.ligne {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-flow: row dense;
  }

  tr::before {
    content: '';
    grid-column: 3
  }

  tr :nth-child(2) {
    grid-column: 1;
    grid-row: 1 / span 2
  }

  tr :nth-child(3) {
    grid-column: 2 / span 5;
  }
}

<h2>HTML Table</h2>

<table>
  <tr class="ligne">
    <th>Un</th>
    <th>Deux</th>
    <th>Trois</th>
    <th>Quatre</th>
    <th>Cinq</th>
    <th>Six</th>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 1, Col 1</td>
    <td class="col2">Row 1, Col 2</td>
    <td class="col3">Row 1, Col 3</td>
    <td class="col4">Row 1, Col 4</td>
    <td class="col5">Row 1, Col 5</td>
    <td class="col6">Row 1, Col 6</td>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 2, Col 1</td>
    <td class="col2">Row 2, Col 2</td>
    <td class="col3">Row 2, Col 3</td>
    <td class="col4">Row 2, Col 4</td>
    <td class="col5">Row 2, Col 5</td>
    <td class="col6">Row 2, Col 6</td>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 3, Col 1</td>
    <td class="col2">Row 3, Col 2</td>
    <td class="col3">Row 3, Col 3</td>
    <td class="col4">Row 3, Col 4</td>
    <td class="col5">Row 3, Col 5</td>
    <td class="col6">Row 3, Col 6</td>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 4, Col 1</td>
    <td class="col2">Row 4, Col 2</td>
    <td class="col3">Row 4, Col 3</td>
    <td class="col4">Row 4, Col 4</td>
    <td class="col5">Row 4, Col 5</td>
    <td class="col6">Row 4, Col 6</td>
  </tr>
  <tr class="ligne">
    <td class="col1">Row 5, Col 1</td>
    <td class="col2">Row 5, Col 2</td>
    <td class="col3">Row 5, Col 3</td>
    <td class="col4">Row 5, Col 4</td>
    <td class="col5">Row 5, Col 5</td>
    <td class="col6">Row 5, Col 6</td>
  </tr>
</table>

there is just a few cells to reset in the grid and grid column's sizes . bot screenshots show 6 columns.

if that is not what you look for, please rephrase your question ;)