Заказ Flexbox и упаковка 3 предметов

Question

Вот что я пытаюсь сделать:

До 768 пикселей (слева) и выше (справа):

Прямо сейчас мой код выглядит так:

.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 , надеюсь, это то, чего вы хотите достичь.