Javascript 网格到列表视图，仅CSS（带Flexbox）

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

当我点击列表查看按钮时，我的卡会改变。我希望有以下布局：

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

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

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

多谢各位

我的完整代码在Codepen中提供：

HTML:

CSS:

---

html代码（

.card\uu 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;
    }
  }
}

---

css中没有单击属性。您可能希望使用radio box hack来实现sameI计划使用javascript实现的目标。只是我不想通过JS重新排列我的组件。

.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;
    }
  }
}

.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;
    }
  }
}