Search code examples
cssflexboxgrid

Show column data one after another on mobile, while on desktop its in rows with CSS only

I have got a challenge in CSS, NO HTML CHANGES ALLOWED.

Created a small list of footer items, which are rows wise in DOM but need to treat it like columns on desktop, but on mobile each column should come after one another.

Here is the code which I tried So far and image also that what is needed:

enter image description here

.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>

As you can see in given code, the data is in rows in real, but challenge is to treat it like rows, and then on mobile each column should come one after another.

I tried to achieve this with nth-child logic,

Something like this, &:nth-child(5n+1){}

but unable to get the desired result, is it possible with NTH-child or Grid? or any other approach is better.

Solution

  • You can easily achieve this by using the NTH-CHILD approach you were trying, All you need to do is, calculate your Logic,

    By your question, I assuming here that your item width on desktop will remain 20%, Ie. 5 items in each row. Then do this.

    .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>