Single table cell to be full width on another row

I have a table mark-up that looks like the below:

-----------------
| a | b | c | d |
-----------------

On a different breakpoint, I would like the 'd' cell to shift below and go full width.

-------------
| a | b | c |
-------------
|     d     |
-------------

Is this possible with css?

You could use a media query and flexbox to override the default table styles.

table {
  border-collapse: collapse;
  display: block;
}

tr {
  display: flex;
  flex-wrap: wrap;
}

td {
  border: 1px solid #ddd;
  display: inline;
  flex: 1;
  padding: 5px 10px;
  text-align: center;
}

td.d {
  flex: 3;
  flex-basis: 100%;
}

<table>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td class="d">D</td>
  </tr>
</table>