<Details> 和 <summary> 在别人之上 <details> 和 <summary>

Question

你好抱歉我的英语不好，这不是我的母语。 我混合使用文章、详细信息和摘要创建了一个 Html。 看起来不错，但我希望当您单击摘要时，详细信息会显示在其下方其他文章的顶部。现在它没有这种行为：

我的html代码：

<section id="caja">
<article class="citas_totales">
            <article class="citas">
                <img src="../imagenes/citas/andrea.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="../imagenes/citas/andrea.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="../imagenes/citas/andrea.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="../imagenes/citas/andrea.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="../imagenes/citas/andrea.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
            <article class="citas">
                <img src="../imagenes/citas/andrea.jpg" alt="" class="fotos_citas">
                <details class="detalles1">
                    <summary>Jenna</summary>
                    <ul>
                        <li>23 años</li>
                        <li>1,63 m</li>
                        <li>Pelo negro</li>
                    </ul>
                </details>
            </article>
</article>
</section>

在 .citas_totales 的左侧会有一个过滤搜索表单，我没有放在这里。

我的CSS：

#caja{
    display: flex;
}

.citas_totales{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

.citas{
  padding: 10px;
  background-color: antiquewhite;
  margin: 30px;
}

我不知道我应该使用什么，我读过“z-index”但我不知道如何正确实施它。