図あり　HTML/CSSでレスポンシブ対応できない。表の入替え　スマホ

お世話になります。HTMLとCSSについて質問させて頂きます。
スマホの時に表の入替えを実施したいです。
具体的には
PCで開いた時には「１」で
スマホで開いた時には「２」に表示をかえたいです。

#やったこと・ためしたこと

HTMLとCSSを以下に記載させて頂きます。

html

<table class="tbl-r03">
  <thead>
    <tr>
      <th>見出し01(th)</th>
      <th>見出し02(th)</th>
      <th>見出し03(th)</th>
      <th>見出し04(th)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容（コンテンツ）上</td>
      <td>内容（コンテンツ）上</td>
      <td>内容（コンテンツ）上</td>
      <td>内容（コンテンツ）上</td>
    </tr>
    <tr class="last">
      <td>内容（コンテンツ）下</td>
      <td>内容（コンテンツ）下</td>
      <td>内容（コンテンツ）下</td>
      <td>内容（コンテンツ）下</td>
    </tr>
  </tbody>
</table>

css

test.css
1
2p {
3  font-size: 16px;
4  font-weight: bold;
5  text-align: center;
6  margin: 60px auto 40px;
7}
8th {
9  background: #e9727e;
10  border: solid 1px #ccc;
11  color: #fff;
12  padding: 10px;
13}
14td {
15  border: solid 1px #ccc;
16  padding: 10px;
17}
18@media screen and (max-width: 640px) {
19  .tbl-r03 {
20    width: 90%;
21  }
22  .tbl-r03 tr {
23    display: block;
24    float: left;
25  }
26  .tbl-r03 tr td, 
27  .tbl-r03 tr th {
28    border-left: none;
29    display: block;
30    height: 50px;
31  }
32  .tbl-r03 thead {
33    display: block;
34    float: left;
35    width: 30%;
36  }
37  .tbl-r03 thead tr {
38    width: 100%;
39  }
40  .tbl-r03 tbody {
41    display: block;
42    float: left;
43    width: 70%;
44  }
45  .tbl-r03 tbody tr {
46    width: 50%;
47  }
48  .tbl-r03 tr td + td {
49    border-left: none;
50  }
51  .tbl-r03 tbody td:last-child {
52    border-bottom: solid 1px #ccc;
53  }
54}