css在小窗口宽度中更改表格中元素的顺序
Posted
技术标签:
【中文标题】css在小窗口宽度中更改表格中元素的顺序【英文标题】：css change order of elements in table in small window-width 【发布时间】：2018-08-18 13:58:07 【问题描述】：我目前正在学习关于 udemy 的 html/css 课程，现在我尝试使网站具有响应性。在这个screenshot 中，您可以看到网站在“正常”屏幕尺寸下的外观。我做了三行，所以即使一个名字需要两行文本，一切都在同一水平上。
现在我遇到的问题是，当宽度变小时，行会显示在彼此下方。那完全没问题，但现在工作和社会联系都在底部，不在它们所属的画面之下。我觉得看图screenshot small window width比较容易理解。
当然，我可以用另一种排列方式编写第二个 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" >
<p class="team-name">John Doe</p>
</div>
<div class="four columns">
<img src="img/employee-2.jpg" class="team-image" >
<p class="team-name">Richard Miles</p>
</div>
<div class="four columns">
<img src="img/employee-3.jpg" class="team-image" >
<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://***.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>
我希望问题很清楚。如果没有，请发表评论，我会尝试添加缺失的信息。
【问题讨论】：
【参考方案1】：是否有一个选项告诉 css 它应该显示列 当宽度变小时，彼此下方而不是行？
我不确定这是这里的问题。您可以简单地重新构建您的标记，以便将每个人的信息一起保存在同一列中。
下面的示例显示了工作信息从单独的行移动到每个人的姓名下方，这应该可以为您提供不同屏幕尺寸的正确布局。您可以对社交媒体图标执行相同操作。
fiddle
<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" >
<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" >
<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" >
<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://***.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>【讨论】：
感谢您的回答。但是正如我所说，我没有将一个人的所有信息放在同一列中，因为当一个名称占用两行文本时，某些信息不在同一水平/高度上。正如我们在您提供的代码中看到的那样，“Graphic Designer”和“3D-Artist”这两个词与“Coder”和“Marketer”不在同一级别。以上是关于css在小窗口宽度中更改表格中元素的顺序的主要内容，如果未能解决你的问题，请参考以下文章