css - Susy列和断点乱序列表？

Question

我正在使用 Susy 及其断点来执行一些媒体查询布局，但我遇到了一个奇怪的问题，即<li>所有内容的顺序不同，这很奇怪。

在此处检查案例（警告 NSFW）：http ://cl.ly/L6Xf和此处http://cl.ly/L6cd

// Grid
.page
  +container
  +susy-grid-background

// Profiles
#profiles
  ul
    margin-top: 2.5em
    li
      height: 160px
      +span-columns(5)
      &:nth-child(2n)
        +omega         
      margin-bottom: 2.2em
      border: 5px solid $white
      overflow: hidden
      img
        width: auto
        height: 100% 
      span
        background: $white
        padding: 5px 10px
        position: absolute


+at-breakpoint(30em 12)
  #profiles ul li
    +span-columns(4, 12)
    &:nth-child(3n)
      +omega

谢谢，

Answer 1

在您的新断点处，您需要先从 2n 中删除 omega，然后再将其添加到 3n。否则，您在 2n 和 3n 上都设置了 omega li。

+at-breakpoint(30em 12)
  #profiles ul li
    +remove-nth-omega(2n)
    +span-columns(4, 12)
    +nth-omega(3n)