javascript - 网格到 ListView ，仅 CSS(带 Flexbox)

Question

虽然有一个使用 javascript 的简单解决方案，但我希望找到一个纯 CSS 解决方案(最有可能使用 CSS3，flexbox 布局)。

当我点击 ListView 按钮时，我的卡片发生了变化。我想要以下布局:

第一张卡片很容易制作。但是在保持相同结构的同时，我不能像屏幕截图那样放置我的元素。我想使用“Order”属性(codepen 中的 l-55 到 l-67)对我的元素重新排序，但它显然不起作用。

第二个问题，如何把items放在同一行，然后在第二个之后，换行？

你认为坚持使用 CSS 来做这件事是愚蠢的吗？

谢谢。

我的完整代码在 Codepen 中可用:

http://codepen.io/anon/pen/oZNKxr

HTML:

a.card.card--large
    .card__container
      .card__body
        .card__category Category
        .card__title My title
        .card__date April 2016
        .card__text
        |  Lorem ipsum dolor sit amet.
    

CSS:

.card--large {
  height: 130px;

  .card__body {
    display: flex;
    flex-direction: column;

    .card__category {
      order: 3;
    }

    .card__title {
      order: 1;
    }

    .card__date {
      order: 2;
    }

    .card__text {
      order: 4;
    }
  }
}

Answer 1

您在 html 代码 (.card__text) 中缺少缩进，这就是顺序不起作用的原因。

要对元素排序并在第二个元素之后换行，试试这个:

.card--large {
  .card__body::before, .card__body::after {
    content: '';
    width: 100%;
    order: 1;
  }

  .card__body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .card__category {
      order: 1;
    }

    .card__text {
      order: 1;
    }
  }
}

Updated CodePen