在移动设备上一个接一个地显示 Coolum 数据，而在桌面上，它仅使用 CSS 成行显示，答案

【问题标题】：show Coolum data one after another on mobile, while on desktop its in rows with CSS only,在移动设备上一个接一个地显示 Coolum 数据，而在桌面上，它仅使用 CSS 成行显示，
【发布时间】：2021-07-09 18:42:42
【问题描述】：

我在 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？或任何其他方法更好。

【问题讨论】：

你不需要混合你的列表来匹配弹性行为，以后通过 CSS 取消混合它们！？这显然是您需要的列 CSS 布局。 101 示例：ul {column-count:5;} @media screen and (max-width: 600px) {ul{column-count:1;}} 1 行并通过媒体查询重置。简单的代码可以节省您的时间；）列表中的示例从一开始就没有混淆：jsfiddle.net/tony720s
它是一种遗留代码，我无法更改它，它需要在桌面上保持原样，然后在移动设备上它应该一个接一个地跟随列。

标签： css flexbox grid

【解决方案1】：

您可以通过使用您尝试的 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>

【讨论】：

【解决方案2】：

如果你可以访问 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>

【讨论】：

抱歉不提这个了，我不能修改HTML