Hey Roderick Gadellaa 👋

Good spot! It’s certainly a worthy point making. However, I did briefly try using n rules and was unable to get the desired behavior 😢

Have you been successful with them?

The current code creates the order in this fashion

for $breakpoint, $value in $config.responses.breakpoints
  
  define('$cols', $config.responses.cols[$breakpoint])
  
  @media(min-width $value)
    width (100% / $cols * 1%)
    for $panel in (1..$config.items)
      &:nth-child({$panel})
        $newOrder = $panel % $cols
        if $newOrder == 0
          $newOrder = $cols
        order $newOrder

I believe the way to integrate n rules would be something like

@media(min-width $value)
  width (100% / $cols * 1%)
  &:nth-child({$cols}n + 1)
    order $cols

However, this yields undesired results 😢

For example, 4n + 1 would give an order of 4 to the first panel in the container. So if we change that up to just 4n maybe that would work? No 👎 That’s because now, our 6th element which we would want to have anorder of 2 in a four column layout, will actually have an order of 3. That’s because it falls into the 3n rule.

If you have got a working n formula, that would be awesome to see 🙌 But my brief thoughts on using them didn’t yield quite what I wanted.

If I need to cater for a dynamic amount of content, I would certainly consider setting the order via Javascript instead. I believe this is touched upon in the article.

Hope that helps!