重新排序 CSS 网格中的列

Answer 1

ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Define 4 columns */
    gap: 10px;
    /* Optional: adds gap between rows/columns */
}

li {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Each li also has 4 columns */
}

li p:nth-of-type(1) {
    grid-column: 1;
    /* Position first p in the first column */
}

li p:nth-of-type(2) {
    grid-column: 2;
    /* Position second p in the second column */
}

li p:nth-of-type(3) {
    grid-column: 3;
    /* Position third p in the third column */
}

li p:nth-of-type(4) {
    grid-column: 4;
    /* Position fourth p in the fourth column */
}

@media (max-width: 650px) {
    ul {
        grid-template-columns: repeat(2, 1fr);
        /* Only 2 columns in the ul */
    }

    li {
        grid-template-columns: repeat(2, 1fr);
        /* Each li has 2 columns */
    }

    li p:nth-of-type(1),
    /* A and C are in the first column */
    li p:nth-of-type(3) {
        grid-column: 1;
    }

    li p:nth-of-type(2),
    /* B and D are in the second column */
    li p:nth-of-type(4) {
        grid-column: 2;
    }
}

• 列出项目

在媒体查询中：网格切换为 ul 和 li 的 2 列。 p 元素重新定位，使得 A 和 C 位于第一列，B 和 D 位于第二列。