如何在选定的列中向下移动元素

Question

我已经与团队成员创建了一个flexbox网格。每个团队项目都包含其他文本（不要太长）。单击标题文本后，该文本将可见。

我希望当有人打开其他文本时，该文本显示在下一行中，将当前项下的所有项目下推（陡峭）。

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");
      }
    }
  );
}