td:td的第n个子变更单

Question

我有这个表，当我缩小屏幕时，我希望第二个td显示在第一个td的顶部。

@media screen and (min-width: 200px) and (max-width: 872px) {
td :nth-child(1) {display:bottom}

td :nth-child(2) {display:top}
}

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
dhklsadhfjl;skdjflskdjfzx,nc,zmxnv;lkjdfsd;lakfjas,nxc
</td>
<td><div class="w3-content w3-section" style="max-width:500px">
<img class="mySlides w3-animate-fading" src="1ma63N35/1.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="1ma63N35/2.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="1ma63N35/3.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="1ma63N35/4.jpg" style="width:100%">
<img class="mySlides w3-animate-fading" src="1ma63N35/5.jpg" style="width:100%">
</div></td>
</tr>
</table>

css

@媒体屏幕和(最小宽度：200px(和(最大宽度：872px({td:nth个子(1(｛显示：底部｝

td:nth个子(2(｛显示：顶部｝

}

Answer 1

最好的方法是使用css网格。它做了一个类似表格的样式，没有限制，也没有对表格进行繁重的编码。使用网格区域，您可以轻松地更改列表顺序。

.grid {
display: grid;
grid-template-columns: auto minmax(min-content, 500px);
grid-auto-rows: auto;
grid-gap: 10px;
}
img {
display: block;
}
@media only screen 
and (min-width: 200px) 
and (max-width: 872px) {
.grid {
grid-template-columns: 1fr;
grid-template-areas:
"pictures"
"text";
}

.pictures {
grid-area: pictures;
}

.text {
grid-area: text;
}
}

<div class="grid">
<div class="text">
dhklsadhfjl; skdjflskdjfzx, nc, zmxnv; lkjdfsd; lakfjas, nxc
</div>
<div class="pictures">
<img class="mySlides w3-animate-fading"
src="1ma63N35/1.jpg">
<img class="mySlides w3-animate-fading"
src="1ma63N35/2.jpg">
<img class="mySlides w3-animate-fading"
src="1ma63N35/3.jpg">
<img class="mySlides w3-animate-fading"
src="1ma63N35/4.jpg">
<img class="mySlides w3-animate-fading"
src="1ma63N35/5.jpg">
</div>
</div>