html - css 在小窗口宽度下更改表中元素的顺序

Question

我目前正在学习 udemy 上的 html/css 类(class)，现在我尝试让网站响应。在这个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" 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>

我希望问题很清楚。如果没有，请发表评论，我会尝试添加缺失的信息。

Answer 1

Is there an option to tell css that it should display the columns underneath each other instead of the rows when the width gets smaller?

我不确定这是这里的问题。您可以简单地重组您的标记，以便每个人的信息都保存在同一列中。

下面的示例显示工作信息从其自己的行移动到每个人姓名的下方，这应该为您提供在不同屏幕尺寸上的正确布局。您可以对社交媒体图标执行相同的操作。

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" 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>