如何在媒体查询中更改网格行

Question

我在页面上有一个页脚，该页脚分配给20-20网格的最后一个网格行grid-row 20。我想将其重新分配给较小的介质尺寸的第15行网格。

以下是带有媒体查询的CSS：

#footer_x{
    grid-column: 6 / 15;
    grid-row: 20 / 20;
    font-family: robotoregular;
    font-size: 6px;
    color: rgb(100,100,100);
    padding-left: 15%;
    transition-timing-function: ease-in 150ms;
}

@media (min-width: 320px) {
  #footer_x { 
    font-size: calc( 0.0125vw + 3px );
    grid-row: 15 / 15; }
}

@media (min-width: 960px) {
  #footer_x { 
    font-size: 12px;
    grid-row: 20 / 20; }
}

这是网格容器上的css：

.grid {
display: grid;
width: 100vw;
height: 100vh;
grid-template-rows: repeat(20, 5%);
grid-template-columns: repeat(20, 5%);
}

尽管字体大小在媒体查询中有效，但是页脚不会更改手机的位置，并且在页面下方显得太远。代码中的其他内容都不会影响到这一点。

如何使用媒体查询更改元素的网格行？