Flexbox订购并包装3个项目

Question

这就是我要做的事情：

最多768px（左）和上（右）：

现在我的代码看起来像这样：

.container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;

  > * {
    width: 50%;
  }
  &__name {
    order: 0;
  }
  &__desc {
    order: 2;
  }
  &__link {
    order: 1;
  }
}

@media (max-width: 767px) {
  .container {
    flex-direction: column;
    > * {
      width: 100%;
    }
    &__name {
      order: 0;
    }
    &__desc {
      order: 1;
    }
    &__link {
      order: 2;
    }
  }
}

但这看起来像这样：

我错过了以这种方式包装物品的方法吗？提前谢谢你：）

Answer 1

您可以尝试这种方式：

.container {
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  height: 100%;
  >* {
    width: 50%;
  }
  &__name {
    background-color: blue;
    flex: 0 0 0;
    order: 0;
  }
  &__desc {
    background-color: pink;
    flex: 0 0 100%;
    order: 2;
    height: 100%;
  }
  &__link {
    background-color: red;
    flex: 0 0 0;
    order: 1;
  }
}

@media (max-width: 767px) {
  .container {
    flex-wrap: nowrap;
    >* {
      width: 100%;
    }
    &__name {
      order: 0;
    }
    &__desc {
      order: 1;
      flex: 1 1 auto;
      height: auto;
    }
    &__link {
      order: 2;
    }
  }
}

这是一个jsfiddle，希望这是你想要达到的目标。