我目前正在 udemy 上学习 html/css 课程，现在我尝试使网站响应。在此屏幕截图中，您可以看到网站在"正常"屏幕尺寸下的外观。我做了三行，所以即使名称需要两行文本，所有内容也在同一级别。
现在我遇到了一个问题，当宽度变小时，行会显示在彼此下方。这完全没问题，但现在工作和社会联系都处于底部，而不是它们所属的图片。我认为当您查看图片截图小窗口宽度时更容易理解。
当然，我可以用其他排列方式编写第二个 html 代码，并在窗口宽度较小时显示它。但这意味着大量重复的代码。如果我想稍后更改图片或其他内容，我必须在两个代码段落上更改它。所以我正在寻找一个"更清洁"的解决方案。
是否有一个选项可以告诉 css 当宽度变小时，它应该在彼此下方显示列而不是行？
PS：我正在使用骨架。
这是 html 代码：
<div class="team" id="team">
<div class="container">
<h2 class="team-heading">Amazing <strong>Team</strong></h2>
<p class="team-subheading">These wonderful people make work enjoyable.</p>
<div class="row">
<div class="four columns">
<img src="img/employee-1.jpg" class="team-image" alt="Team member 1">
<p class="team-name">John Doe</p>
</div>
<div class="four columns">
<img src="img/employee-2.jpg" class="team-image" alt="Team member 2">
<p class="team-name">Richard Miles</p>
</div>
<div class="four columns">
<img src="img/employee-3.jpg" class="team-image" alt="Team member 3">
<p class="team-name">Maximilian Mustermann</p>
</div>
</div>
<div class="row">
<div class="four columns">
<p class="team-occupation">Marketer</p>
</div>
<div class="four columns">
<p class="team-occupation">Coder</p>
</div>
<div class="four columns">
<p class="team-occupation">Graphic Designer<br />3D-Artist</p>
</div>
</div>
<div class="row">
<div class="four columns">
<div class="team-sociallinks">
<a class="team-sociallink" href="https://twitter.com/" target="_blank">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
<a class="team-sociallink" href="https://facebook.com" target="_blank">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
<a class="team-sociallink" href="https://www.pinterest.de/" target="_blank">
<i class="fab fa-pinterest-p" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="four columns">
<div class="team-sociallinks">
<a class="team-sociallink" href="https://facebook.com" target="_blank">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
<a class="team-sociallink" href="https://stackoverflow.com" target="_blank">
<i class="fab fa-stack-overflow" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="four columns">
<div class="team-sociallinks">
<a class="team-sociallink" href="https://twitter.com/" target="_blank">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
<a class="team-sociallink" href="https://facebook.com" target="_blank">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
<a class="team-sociallink" href="https://www.pinterest.de/" target="_blank">
<i class="fab fa-pinterest-p" aria-hidden="true"></i>
</a>
<a class="team-sociallink" href="https://www.youtube.com/" target="_blank">
<i class="fab fa-youtube" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<p class="team-text">
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</div>
</div>
我希望这个问题是明确的。如果没有，请发表评论，我尝试添加缺少的信息。
是否有一个选项可以告诉 css 它应该显示列 当宽度变小时，彼此下方而不是行？
我不确定这是这里的问题。您可以简单地重新构建标记，以便将每个人的信息保留在同一列中。
下面的示例显示了作业信息从其自己的行移动到每个人的姓名下方，这应该会为您提供不同屏幕尺寸的正确布局。您可以对社交媒体图标执行相同的操作。
小提琴
<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="team" id="team">
<div class="container">
<h2 class="team-heading">Amazing <strong>Team</strong></h2>
<p class="team-subheading">These wonderful people make work enjoyable.</p>
<div class="row">
<div class="four columns">
<img src="https://unsplash.it/200" class="team-image" alt="Team member 1">
<p class="team-name">John Doe</p>
<p class="team-occupation">Marketer</p>
</div>
<div class="four columns">
<img src="https://unsplash.it/200" class="team-image" alt="Team member 2">
<p class="team-name">Richard Miles</p>
<p class="team-occupation">Coder</p>
</div>
<div class="four columns">
<img src="https://unsplash.it/200" class="team-image" alt="Team member 3">
<p class="team-name">Maximilian Mustermann</p>
<p class="team-occupation">Graphic Designer<br />3D-Artist</p>
</div>
</div>
<div class="row">
<div class="four columns">
<div class="team-sociallinks">
<a class="team-sociallink" href="https://twitter.com/" target="_blank">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
<a class="team-sociallink" href="https://facebook.com" target="_blank">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
<a class="team-sociallink" href="https://www.pinterest.de/" target="_blank">
<i class="fab fa-pinterest-p" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="four columns">
<div class="team-sociallinks">
<a class="team-sociallink" href="https://facebook.com" target="_blank">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
<a class="team-sociallink" href="https://stackoverflow.com" target="_blank">
<i class="fab fa-stack-overflow" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="four columns">
<div class="team-sociallinks">
<a class="team-sociallink" href="https://twitter.com/" target="_blank">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
<a class="team-sociallink" href="https://facebook.com" target="_blank">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
<a class="team-sociallink" href="https://www.pinterest.de/" target="_blank">
<i class="fab fa-pinterest-p" aria-hidden="true"></i>
</a>
<a class="team-sociallink" href="https://www.youtube.com/" target="_blank">
<i class="fab fa-youtube" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<p class="team-text">
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum.
</p>
</div>
</div>