Keep removing last-child of a <ul> based on width?

Question

I have this layout and I'd like to keep removing the last-child of the list (shrink) the lower the resolution is. The code is exactly my implementation:

p > span {
  font-weight: bold;
}

.layout1 {
  width: 1170px;
  list-style: none;
  background: gray;
  position: relative;
}

.layout1 > li {
  display: inline-block;
  vertical-align: top;
  width: 24%;
  margin-right: 1%;
  height: 100px;
  background: #dbca7f;
}

.layout1 > li:last-child {
  margin-right: 0;
}

/* 
/* This is what I'd like to do for about 3 times, keep cutting, ignore the (-justToMakeItNotWork, the code would otherwise work without it. */

@media screen and (max-width: 990px) {
  .layout1(-justToMakeItNotWork) > li:last-child {
    display: none;
  }
}

/* And again */

@media screen and (max-width: 768px) {
  .layout1(-justToMakeItNotWork) > li:last-child {
    display: none;
  }
}

/* And again, probably */
  

<!-- There are other bootstrap classes added, but only col-XX-NN, irrelevant to the issue. -->
<p> This is the full view </p>
<ul class="layout1 col-md-12">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
</ul>

<p> Let's assume that we're now unde 768px, <span> I'd like to now cut the number of posts show to 3</span>, like this: </p>

<ul class="layout1 col-md-12">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
</ul>

<p> That would work fine with just a rule, okay, but now let's say my screen got down-graded to ~468px. <span>I'd like to do it again and cut my posts to just 2: </span></p>

<ul class="layout1 col-md-12">
  <li class="post col-md-3">
  <li class="post col-md-3">
</ul>

Which translates to, on full view:

I'd like to achieve, on lower screens, something like this:

And 2 columns / posts on < 468px respectively.

The table of values:

1170px - 4 columns.
990px - 4 columns.
768px - 3 columns.
468px - 2 columns.

Unfortunately, adding @media-queries to keep removing the last-child doesn't work after the first last-child being removed. How can I fix this?

Additionally, I can't add a rule to remove the last 2-childs, because the higher-resolution rule already has trimmed down 1 post, as such, I'll be left with just one post.

Answer 1

You could use :nth-child(n+x) to target elements. Like "select all but the first x elements".

@media screen and (max-width: 768px) {
  .layout1 > li:nth-child(n+3) {
    display: none;
  }
}

@media screen and (max-width: 468px) {
  .layout1 > li:nth-child(n+2) {
    display: none;
  }
}

Answer 2

You can use nth-last-child in a similar manner to nth-child

@media screen and (max-width: 990px) {
  .layout1 > li:nth-last-child(1) {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .layout1 > li:nth-last-child(2) {
    display: none;
  }
}

p > span {
  font-weight: bold;
}

.layout1 {
  list-style: none;
  background: gray;
  position: relative;
}

.layout1 > li {
  display: inline-block;
  vertical-align: top;
  width: 24%;
  margin-right: 1%;
  height: 100px;
  background: #dbca7f;
}

.layout1 > li:last-child {
  margin-right: 0;
}

/* 
/* This is what I'd like to do for about 3 times, keep cutting, ignore the (-justToMakeItNotWork, the code would otherwise work without it. */

@media screen and (max-width: 990px) {
  .layout1 > li:nth-last-child(1) {
    display: none;
  }
}

/* And again */

@media screen and (max-width: 768px) {
  .layout1 > li:nth-last-child(2) {
    display: none;
  }
}

/* And again, probably */

<!-- There are other bootstrap classes added, but only col-XX-NN, irrelevant to the issue. -->
<p> This is the full view </p>
<ul class="layout1 col-md-12">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
  <li class="post col-md-3">
</ul>

Answer 3

You could use :nth-last-child(-n+2) to get the last 2 children:

@media screen and (max-width: 768px) {
  .layout1(-justToMakeItNotWork) > li:nth-last-child(-n+2) {
    display: none;
  }
}