Как переместить элементы вниз в выбранном столбце

Question

Я создал сетку flexbox с членами команды.Каждый элемент команды содержит дополнительный текст (не слишком длинный).Этот текст будет виден после нажатия на текст заголовка.

Мне бы хотелось, чтобы, когда кто-то открывает дополнительный текст, он появляется в следующей строке, опуская (на 1 ступень) все элементы под текущим.

Пример Codepen: https://codepen.io/Matteokr/full/VJGmJd

Если я нажимаю «Элемент 2», под ним появляется дополнительный абзац в том месте, где он был «Элемент 6».«Элемент 6» отправляется в место, где «Элемент 10» и т. Д.

HTML

<div class="col-12 col-md-3 team-members__item">
    <div class="team-members__item--media">
      <img src="https://dummyimage.com/242x242/c9c9c9/000.jpg" alt="">
    </div>
    <div class="team-members__item--txt">
      <h3>Item 1</h3>
    </div>
    <div class="team-members__item--txt-additional">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed felis sapien, facilisis at ante id, blandit sodales mi. Nulla tempor velit eu suscipit feugiat. Donec sit amet sem gravida, fringilla tortor vel, rhoncus est. Praesent id mi mollis velit
        egestas gravida.</p>
    </div>
  </div>
 <div class="col-12 col-md-3 team-members__item">
    <div class="team-members__item--media">
      <img src="https://dummyimage.com/242x242/c9c9c9/000.jpg" alt="">
    </div>
    <div class="team-members__item--txt">
      <h3>Item 2</h3>
    </div>
    <div class="team-members__item--txt-additional">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed felis sapien, facilisis at ante id, blandit sodales mi. Nulla tempor velit eu suscipit feugiat. Donec sit amet sem gravida, fringilla tortor vel, rhoncus est. Praesent id mi mollis velit
        egestas gravida.</p>
    </div>
  </div>
  <div class="col-12 col-md-3 team-members__item">
    <div class="team-members__item--media">
      <img src="https://dummyimage.com/242x242/c9c9c9/000.jpg" alt="">
    </div>
    <div class="team-members__item--txt">
      <h3>Item 3</h3>
    </div>
    <div class="team-members__item--txt-additional">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed felis sapien, facilisis at ante id, blandit sodales mi. Nulla tempor velit eu suscipit feugiat. Donec sit amet sem gravida, fringilla tortor vel, rhoncus est. Praesent id mi mollis velit
        egestas gravida.</p>
    </div>
  </div>
  <div class="col-12 col-md-3 team-members__item">
    <div class="team-members__item--media">
      <img src="https://dummyimage.com/242x242/c9c9c9/000.jpg" alt="">
    </div>
    <div class="team-members__item--txt">
      <h3>Item 4</h3>
    </div>
    <div class="team-members__item--txt-additional">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed felis sapien, facilisis at ante id, blandit sodales mi. Nulla tempor velit eu suscipit feugiat. Donec sit amet sem gravida, fringilla tortor vel, rhoncus est. Praesent id mi mollis velit
        egestas gravida.</p>
    </div>
  </div>
  <div class="col-12 col-md-3 team-members__item">
    <div class="team-members__item--media">
      <img src="https://dummyimage.com/242x242/c9c9c9/000.jpg" alt="">
    </div>
    <div class="team-members__item--txt">
      <h3>Item 5</h3>
    </div>
    <div class="team-members__item--txt-additional">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed felis sapien, facilisis at ante id, blandit sodales mi. Nulla tempor velit eu suscipit feugiat. Donec sit amet sem gravida, fringilla tortor vel, rhoncus est. Praesent id mi mollis velit
        egestas gravida.</p>
    </div>
  </div>
</div>

CSS

.team-members__wrapper {
  .team-members__item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 15px;
    padding-bottom: 15px;


    h3 {
      text-align: center;
      margin: 5px 0 0;

      &:after {
        content: "+";
        font-weight: 400;
        margin-left: 5px;
      }
    }


    .team-members__item--txt {
      cursor: pointer;
      width: 100%;
    }

    .team-members__item--txt-additional {
      display: none;
      flex-direction: column;
      align-items: center;
      margin-top: 16px;

      p {
        font-size: 13px;
      }
    }

    &.active {
      .team-members__item--txt {
        h3 {
          &:after {
            content: "-";
          }
        }
      }

      .team-members__item--txt-additional {
        display: flex;
      }
    }
  }
}

JS

teamMembers();

function teamMembers() {
  $(".team-members__wrapper").on(
    "click",
    ".team-members__item > .team-members__item--txt",
    function() {
      var item = $(this).closest(".team-members__item");

      if (item.hasClass("active")) {
        item.removeClass("active");
      } else {
        $(".team-members__wrapper")
          .find(".team-members__item")
          .removeClass("active");
        item.addClass("active");
      }
    }
  );
}