Jquery 屏幕调整后堆叠div？

我试着让两个div相邻，图片在左边，信息在右边，当屏幕变小时，我需要它们堆叠（在中间）

每次我尝试修复它时，图像都会浮动到屏幕的两侧，因此它们不会居中

我如何在CSS或JQuery中实现这一点

/*--------------团队------------------------------------*/
#团队{
背景色：#0370AD；
背景：线性梯度（rgba（0,0,0,0.1），rgba（0,0,0,0.1）），#0370AD；
最小高度：115vh；
宽度：100%；
文本对齐：居中；
字体系列：“开放式SAN”；
字母间距：3px；
显示：内联块；
}
#团队#团队负责人{
文本对齐：居中；
颜色：白色；
字体大小：60px；
填充顶部：30px；
}
#h2队{
宽度：100%；
边缘顶部：20px；
边缘底部：20px；
}
#p队{
颜色：白色；
高度：20px；
字体大小：30px；
}
/*---------配置文件分区---------------------------*/
profpics先生{
高度：400px；
宽度：100%；
文本对齐：居中；
左边距：自动；
右边距：自动；
填充顶部：100px；
边框：2件纯黑；
}
.团队形象{
高度：300px；
宽度：550px；
浮动：左；
边框：2件纯黑；
}
.团队形象img{
高度：300px；
宽度：300px；
边框：2件纯黑；
}
.团队信息{
文本对齐：居中；
宽度：600px；
身高：60%；
左缘：3%；
浮动：对；
边框：2件纯黑；
}
.profpics h1{
字体系列：Oswald；
文本对齐：居中；
宽度：100%；
字体大小：50px；
字母间距：3px；
颜色：白色；
填充顶部：10px；
垫底：10px；
边框顶部：4倍纯黑；
边框底部：4倍纯黑；
}
.profpics h2{
字体大小：35px；
颜色：白色；
}

我们队
名称
首席执行官
电子邮件

名称
首席技术官
电子邮件

希望这对您有所帮助

/*--------------团队------------------------------------*/
#团队{
背景色：#0370AD；
背景：线性梯度（rgba（0,0,0,0.1），rgba（0,0,0,0.1）），#0370AD；
最小高度：115vh；
宽度：100%；
文本对齐：居中；
字体系列：“开放式SAN”；
字母间距：3px；
显示：内联块；
}
#团队*{
框大小：边框框；
}
#团队#团队负责人{
文本对齐：居中；
颜色：白色；
字体大小：60px；
填充顶部：30px；
}
#h2队{
宽度：100%；
边缘顶部：20px；
边缘底部：20px；
}
#p队{
颜色：白色；
高度：20px；
字体大小：30px；
}
/*---------配置文件分区---------------------------*/
profpics先生{
宽度：100%；
文本对齐：居中；
左边距：自动；
右边距：自动；
边框：2件纯黑；
宽度：100%；
浮动：左；
填充：100px0；
}
.团队形象{
高度：300px；
宽度：40%；
浮动：左；
边框：2件纯黑；
}
.团队形象img{
高度：300px；
宽度：300px；
边框：2件纯黑；
}
.团队信息{
文本对齐：居中；
宽度：50%；
浮动：对；
边框：2件纯黑；
}
.profpics h1{
字体系列：Oswald；
文本对齐：居中；
宽度：100%；
字体大小：50px；
字母间距：3px；
颜色：白色；
填充顶部：10px；
垫底：10px；
边框顶部：4倍纯黑；
边框底部：4倍纯黑；
}
.profpics h2{
字体大小：35px；
颜色：白色；
}
@介质（最大宽度：768px）{
.team\u image、.team\u info{
宽度：100%
}
.团队形象{
边缘底部：30px；
}
}

我们队
名称
首席执行官
电子邮件

名称
首席技术官
电子邮件

您是否考虑过使用Bootstrap（）框架？通过引导，您可以使用网格系统轻松地为所有视图对齐内容

您可以这样做，例如：

<div class="container">
<div class="row profpics">
<div class="col-md-6">
<div class="team_image">
  <img src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
</div>
</div>
<div class="col-md-6">
<div class="team_info">
  <h1>Name</h1>
  <h2>Chief Executive Officer</h2>
  <p>email</p>
</div>
</div>
</div> <!-- end row -->
<div class="row profpics">
<div class="col-md-6">
<div class="team_image">
  <img    src="https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg">
</div>
</div>
<div class="col-md-6">
<div class="team_info">
  <h1>Name</h1>
  <h2>Chief Executive Officer</h2>
  <p>email</p>
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->

名称
首席执行官
电子邮件

名称
首席执行官
电子邮件

您需要使用响应性设计技术。这意味着首先从配置文件信息上方带有配置文件pic的移动布局开始，然后添加带有断点的媒体查询，从而更改布局，使配置文件pic位于左侧，而配置文件信息位于同一行的右侧

实现这一点的方法是，在移动小屏幕上使用100%的div宽度，然后使用更大屏幕大小的媒体查询更改div宽度和float。这是经典的CSS响应设计技术。我为您创建了一个精简的工作示例。这并不完美，但它说明了这项技术。代码显示了媒体查询，以及我如何更改更大屏幕尺寸的宽度。不过请注意，一般来说，我更喜欢使用%宽度进行响应设计，但我在这里为您使用了px

Stackoverflow的配置文件图片
/*-------团队------------------------------------*/
.clear{clear:both；}/*将样式应用于br，您可以清除上面浮动div的列*/
/*清除两者将清除上面左右浮动的元素*/
#团队{
背景色：#0370AD；
宽度：100%；
}
/*---------配置文件分区---------------------------*/
profpics先生{
/*列1是其他两列上的容器div*/
背景色：#99cc33；
宽度：100%；
保证金：0自动；
}
.团队形象{
/*第2列左列*/
高度：300px；
背景色：#D8AE1B；
/*宽度：550px*/
宽度：100%；
浮动：左；
}
.团队形象img{
高度：300px；
宽度：300px；
边框：2件纯黑；
}
.ImageIsResponsive{
/*将图像置于div中心并使其响应*/
/*“最大宽度”意味着将扩展到其全部尺寸，但不再扩展*/
最大宽度：90%；
高度：自动；
/*将图像置于div列的中心*/
显示：块；
保证金：自动；
}
.团队信息{
/*第3列右列*/
背景色：