网格列表视图，仅限CSS（带有Flexbox）

Question

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

当我点击列表视图按钮时，我的卡片发生了变化。我想要以下布局：

第一张卡很容易制作。但是在保持相同结构的同时，我不能将我的元素放在屏幕截图上。我想用“Order”属性重新排序我的项目（在codepen中为l-55到l-67），但它显然不起作用。

第二个问题，如何将项目放在同一行上，然后在第二个问题后进行换行？

你觉得坚持用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