在移动设备上一个接一个地显示 Coolum 数据，而在桌面上它仅以 CSS 行显示，

Question

我在 CSS 中遇到了挑战，不允许 HTML 更改。

创建了一个小型页脚项目列表，这些项目在 DOM 中按行排列，但需要像桌面上的列一样对待它，但在移动设备上，每一列都应该一个接一个地出现。 这是我到目前为止尝试过的代码，并且还想象了需要什么。

.cmp-footer-navigation__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
}

.cmp-footer-navigation__item {
  width: 20%;
}

<ul class="cmp-footer-navigation__group">
  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/" data-title="HOME" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 1</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/patients-and-families" data-title="Patients &amp; Families" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 6</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/locator" data-title="Locations" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 11</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="https://www.pruittcares.org/" data-title="Donate" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_blank">Link 15</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/emergency-preparedness" data-title="COVID-19" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 19</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company" data-title="Our Company" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 2</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/skilled-nursing" data-title="Skilled Nursing" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 7</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/resources-home" data-title="Resources" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 12</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/partner-services" data-title="Partner Services" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 16</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/contact-us/privacy-policy" data-title="Privacy policy" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 20</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/news-list" data-title="News" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 3</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/home-health" data-title="Home Health" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 8</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/employment" data-title="Careers" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 13</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/vendor-services" data-title="Vendor Services" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 17</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/contact-us/terms-of-use" data-title="Terms of Use" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 21</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/contact-us" data-title="Contact" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 4</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/hospice" data-title="Hospice &amp; Palliative Care" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 9</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services" data-title="Other Services" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 14</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/medical-supply" data-title="Medical &amp; Nutritional Supply" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 18</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/content/dam/pruitthealth/documents/pdf/Section%201557%20Notice%20-%20Doc%20for%20Website.pdf" data-title="Notice of Nondiscrimination" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 22</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" href="#" target="_self">Link 5</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/senior-living" data-title="Senior Living" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 10</a>
  </li>
</ul>

正如您在给定代码中看到的那样，数据实际上是按行排列的，但挑战在于将其视为行，然后在移动设备上每一列都应该一个接一个地出现。

我尝试用 nth-child 逻辑来实现这个，

类似这样，&:nth-child(5n+1){}

但是无法得到想要的结果，NTH-child或者Grid可以吗？或者任何其他方法更好。

Answer 1

如果您有权访问 DOM，您可以这样做，将每一列包装到一个 <li> 标记中并使用 flex-direction ：column

.cmp-footer-navigation__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
}

.cmp-footer-navigation__list {
  display: flex;
  flex-direction: column;
}

.cmp-footer-navigation__item {
  width: 20%;
}

@media (max-width: 576px) {
  .cmp-footer-navigation__group {
    flex-direction: column;
  }
}

<ul class="cmp-footer-navigation__group">
  <li class="cmp-footer-navigation__list">
    <a class="cmp-footer-navigation__item"> link 1 </a>
    <a class="cmp-footer-navigation__item"> link 2 </a>
    <a class="cmp-footer-navigation__item"> link 3 </a>
    <a class="cmp-footer-navigation__item"> link 4 </a>
    <a class="cmp-footer-navigation__item"> link 5 </a>
  </li>
  <li class="cmp-footer-navigation__list">
    <a class="cmp-footer-navigation__item"> link 6 </a>
    <a class="cmp-footer-navigation__item"> link 7 </a>
    <a class="cmp-footer-navigation__item"> link 8 </a>
    <a class="cmp-footer-navigation__item"> link 9 </a>
    <a class="cmp-footer-navigation__item"> link 10 </a>
  </li>
</ul>

Answer 2

您可以使用您尝试的 NTH-CHILD 方法轻松实现这一点，您需要做的就是计算您的逻辑，

根据你的问题，我在这里假设你的项目在桌面上的宽度将保持 20%，即。每行 5 个项目。 然后这样做。

.cmp-footer-navigation__group {
  display: flex;
  flex-direction: column;
}

.cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n+1) {
  order: -5;
}

.cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n-3) {
  order: -4;
}

.cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n-2) {
  order: -3;
}

.cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n-1) {
  order: -2;
}

.cmp-footer-navigation__group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
}

.cmp-footer-navigation__item {
  width: 20%;
}

@media(max-width: 481px) {
  .cmp-footer-navigation__group {
    display: flex;
    flex-direction: column;
  }
  .cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n+1) {
    order: -5;
  }
  .cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n-3) {
    order: -4;
  }
  .cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n-2) {
    order: -3;
  }
  .cmp-footer-navigation__group .cmp-footer-navigation__item:nth-child(5n-1) {
    order: -2;
  }
}

<ul class="cmp-footer-navigation__group">
  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/" data-title="HOME" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 1</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/patients-and-families" data-title="Patients &amp; Families" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 6</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/locator" data-title="Locations" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 11</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="https://www.pruittcares.org/" data-title="Donate" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_blank">Link 15</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/emergency-preparedness" data-title="COVID-19" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 19</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company" data-title="Our Company" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 2</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/skilled-nursing" data-title="Skilled Nursing" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 7</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/resources-home" data-title="Resources" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 12</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/partner-services" data-title="Partner Services" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 16</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/contact-us/privacy-policy" data-title="Privacy policy" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 20</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/news-list" data-title="News" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 3</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/home-health" data-title="Home Health" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 8</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/employment" data-title="Careers" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 13</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/vendor-services" data-title="Vendor Services" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 17</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/contact-us/terms-of-use" data-title="Terms of Use" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 21</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/contact-us" data-title="Contact" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 4</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/hospice" data-title="Hospice &amp; Palliative Care" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 9</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services" data-title="Other Services" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 14</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-company/medical-supply" data-title="Medical &amp; Nutritional Supply" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 18</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/content/dam/pruitthealth/documents/pdf/Section%201557%20Notice%20-%20Doc%20for%20Website.pdf" data-title="Notice of Nondiscrimination" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 22</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" href="#" target="_self">Link 5</a>
  </li>

  <li class="cmp-footer-navigation__item cmp-navigation__item--level-0" data-cmp-data-layer="">
    <a href="/our-services/senior-living" data-title="Senior Living" data-cmp-clickable="" class="cmp-footer-navigation__item-link subtitle subtitle--5" target="_self">Link 10</a>
  </li>
</ul>