Html 在桌面和手机/手风琴/移动div的正确位置显示div？

我有一个使用Bootstrap4的页面，其中显示了我们团队的图像，并在单击图像时使用accordion显示bios

在桌面上，它工作正常，有四个人的图像排成一行。当你点击个人资料时，简历会显示在他们的下方

但是，在移动设备上，视图将更改为四个垂直堆叠的人物图像。当你点击一个人时，简历会出现在第四个人之后的底部

我希望简历显示在你点击的人下面

示例图像：

代码示例：

<section class="p-5">
<div class="container" id="biolevelone">
<div class="row">
    <div class="col-md-3 col-sm-6">
       <div data-toggle="collapse" href="#bio1"><img src="image1.png"/></div>
    </div>
    <div class="col-md-3 col-sm-6">
       <div data-toggle="collapse" href="#bio2"><img src="image2.png"/></div>
    </div>
    <div class="col-md-3 col-sm-6">
       <div data-toggle="collapse" href="#bio3"><img src="image3.png"/></div>
    </div>
    <div class="col-md-3 col-sm-6">
       <div data-toggle="collapse" href="#bio4"><img src="image4.png"/></div>
    </div>
</div> <!-- row -->

<div class="collapse pt-2" id="bio1" data-parent="#biolevelone">
   <div class="card-body">
     <p>Bio text, a couple of paragraphs</p>
   </div>
</div>
<div class="collapse pt-2" id="bio2" data-parent="#biolevelone">
   <div class="card-body">
     <p>Bio text, a couple of paragraphs</p>
   </div>
</div>
<div class="collapse pt-2" id="bio3" data-parent="#biolevelone">
   <div class="card-body">
     <p>Bio text, a couple of paragraphs</p>
   </div>
</div>
<div class="collapse pt-2" id="bio4" data-parent="#biolevelone">
   <div class="card-body">
     <p>Bio text, a couple of paragraphs</p>
   </div>
</div>

</div><!--biolevelone data parent -->
</section>

生物文本，几个段落

生物文本，几个段落

生物文本，几个段落

生物文本，几个段落

---

我尝试在每个配置文件图像div之间向上移动bio-text-cards代码，但是我遇到了相反的问题。i、 在桌面上，所有的个人资料图像突然从行中消失，并在点击图像时移动到生物文本下方，同时在移动设备上工作正常

我只是想问一下，是否可以在你的div上添加类，如果可以，请看看我做了什么

不过有一点解释，只需将你包装传记的div移到包装图片的div之后。然后我只添加类，以便可以操作div。然后添加媒体查询以显示传记

不管怎样，只要看看下面：

.bio容器{
位置：相对位置；
}
.传记{
位置：绝对位置；
顶部：200px；
边框：1px实心；
宽度：100%；
}
@仅介质屏幕和（最大宽度：812px）{
.传记{
位置：静态；
}
.崩溃{
显示：块！重要；
}
}

生物文本，两个段落1

生物文本，两个段落2

生物文本，两个第3段

生物文本，两段4

非常感谢。在移动设备上可以完美地工作，这是对台式机的改进。现在唯一的问题是，在桌面上，bio没有扩展可用空间来为自己腾出空间。因此，简历最终与四幅图像和页脚重叠。在修改之前，它有一个手风琴效果，将页脚向下推以创建房间。有什么想法吗？首先，很抱歉回复太晚了。无论如何，请注意，我将.bio容器添加到类“row”中。我增加了职位：相对；因此传记就依赖于它。所以基本上，因为我定位了绝对传记，它漂浮在“row”类中。可能会给“行”添加一些高度，而不是顶部：200px；，只需将传记放在底部：0；。请看看我为你做的这个密码笔：谢谢！由于我最终计划有更多的bios行，我坚持使用您的第一个解决方案。我不得不删除.collapse{display:block！important；}，因为它使bios无法隐藏/折叠。对于其他人，我还尝试了另一种方法：复制整个bio部分，并给一个“桌面”类和一个“移动”类。然后根据屏幕大小将display设置为none或block。这使我能够在两种屏幕类型上都保持手风琴效果，但在代码量方面有点混乱，所以我将其打包。