現在、udemy の html/css コースを受講しており、ウェブサイトをレスポンシブにしようとしています。このスクリーンショットでは、「通常の」画面サイズでサイトがどのように見えるかを確認できます。名前が 2 行のテキストであっても、すべてが同じレベルになるように 3 つの行を作成しました。
幅が小さくなると、行が互いの下に表示されるという問題があります。それはまったく問題ありませんが、現在、仕事とソーシャルリンクはすべて下にあり、それらが属している図の下ではありません. ウィンドウ幅を小さくしたスクリーンショットの写真を見ていただくとわかりやすいと思います。
もちろん、別の配置で 2 番目の 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>
質問が明確であることを願っています。そうでない場合は、コメントを残してください。不足している情報を追加しようとします。