阻止折叠按钮可折叠同一行引导程序4中的所有div

Question

我有一个FAQ部分，我设计为两列，同一列上有3个div（我正在使用flex，但我说是为了更好地理解该列）

两列中的每个div都像一个折叠按钮，用于在问题下方显示问题的答案。

我也在寻找类似的问题，但似乎没有什么像这个问题。

示例：

第1行：问题A，问题B

第2行：问题C，问题D

第3行：问题E，问题F

问题：当我单击问题A时，整个第1行合拢，显示问题A的答案，并在问题B的下方留有空白。

我该如何推送问题A下的内容而不是折叠第1行？

我的HTML：

    <div id="questions-container">
        @foreach($questions as $question)
            <div class="question-container">
                <div data-toggle="collapse" data-target="#answerCollapse-{{$question->id}}" aria-expanded="false"
                     aria-controls="collapseExample">
                    {{$question->question}}
                </div>
                <div class="collapse" id="answerCollapse-{{$question->id}}">
                    <div class="card card-body">
                        {{$question->answer}}
                    </div>
                </div>
            </div>
        @endforeach
    </div>

CSS：

#questions-container {
    width: 60%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
}

.question-container {
    flex-basis: 45%;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #d5d1d1;
    border-radius: 5px;
}

.question-container:hover {
    background-color: #ffffff;
    -webkit-transition: 1s;
    cursor: pointer;
}