I am currently following an html/css course on udemy and now I try to make the website responsive. In this screenshot you can see how the site looks with a "normal" screen size. I made three rows so everything is on the same level even if a name takes two lines of text.
Now I have the problem that the rows get displayed underneath each other when the width gets smaller. That would be totally fine but now the jobs and social-links are all at the bottom and not unter the picture they belong to. I think it is easier to understand when you look at the picture screenshot small window width.
Of course I could write a second html code with an other arrangement and display this when the window has a small width. But that would mean a lot of duplicate code. If I would want to change a picture or something else later on I would have to change it on both code-passages. So I am searching for a "cleaner" solution.
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?
PS: I am using skeleton.
Here is the html-code:
<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>
I hope the question is clear. If not please leave a comment and I try to add missing information.
I'm not sure that's the issue here. You can simply restructure your markup, so that the information for each person is kept together in the same column.
Example below shows the job information moved from its own row to underneath each person's name, which should give you the correct layout on different screen sizes. You can do the same for the social media icons.
fiddle