作品集网站响应式布局：如何让文本在小屏幕下移至图片下方？

我正在搭建个人第一个作品集网站，遇到如下布局问题：当前实现了文本与图片左右排列的效果，但希望在缩小网站屏幕时，文本能移至图片下方。其中左侧location模块的文本下移方案已生效，现需实现右侧age模块的文本在小屏幕下移至对应的person icon图片下方。

当前代码 #

CSS代码 #

.myself {
  display: grid;
  margin: 100px 70px 0px 70px;
  grid-template-columns: 1fr 1fr;
}

.location {
  display: flex;
  align-items: center;
  width: 30vw;
  margin-right: auto;
}

.location>img {
  width: 35%;
  height: auto;
}

.location h2 {
  display: inline-block;
  padding: 0px 0px 0px 20px;
  margin-right: auto;
}

.age {
  display: flex;
  align-items: center;
  width: 30vw;
  margin-left: auto;
}

.age>img {
  width: 45%;
  height: auto;
}

.age h2 {
  display: inline-block;
  padding: 0px 20px 0px 0px;
  text-align: right;
  margin-left: auto;
}

HTML代码 #

<div class="me">
  <div class="myself">
    <div class="location">
      <img src="./img/location.svg" alt="location icon">
      <h2 class="bold">Based in <span class="purple"> Switzerland</span></h2>
    </div>

    <div class="age">
      <h2 class="bold">I am <br><span class="purple">18 years</span> old</h2>
      <img src="./img/person.svg" alt="person icon">
    </div>
  </div>
</div>

当前效果 #

解决方案 #

通过添加媒体查询调整小屏幕下的布局规则，即可实现需求：

.myself {
  display: grid;
  margin: 100px 70px 0px 70px;
  grid-template-columns: 1fr 1fr;
}

.location {
  display: flex;
  align-items: center;
  width: 30vw;
  margin-right: auto;
}

.location>img {
  width: 35%;
  height: auto;
}

.location h2 {
  display: inline-block;
  padding: 0px 0px 0px 20px;
  margin-right: auto;
}

.age {
  display: flex;
  align-items: center;
  width: 30vw;
  margin-left: auto;
}

.age>img {
  width: 45%;
  height: auto;
}

.age h2 {
  display: inline-block;
  padding: 0px 20px 0px 0px;
  text-align: right;
  margin-left: auto;
}

/* 新增小屏幕适配规则 */
@media (max-width: 768px) {
  /* 让两个模块从左右排列改为上下排列 */
  .myself {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  /* 统一调整location模块垂直布局与对齐 */
  .location {
    flex-direction: column;
    width: auto;
    margin: 0 auto;
    text-align: center;
  }
  .location h2 {
    padding: 15px 0 0 0;
    margin: 0;
  }

  /* 调整age模块：垂直布局，图片前置，文本居中 */
  .age {
    flex-direction: column;
    width: auto;
    margin: 0 auto;
    text-align: center;
  }
  .age h2 {
    padding: 15px 0 0 0;
    margin: 0;
    text-align: center;
  }
  /* 把图片调整到文本上方（因为HTML里文本写在图片前面） */
  .age img {
    order: -1;
  }
}

关键说明 #

• 用@media (max-width: 768px)设置小屏幕断点，可根据需求修改宽度值
• grid-template-columns: 1fr让.myself容器的两个子模块切换为上下排列
• 对.age设置flex-direction: column实现垂直布局，通过order: -1调换图片与文本的显示顺序
• 调整文本的内边距与对齐方式，优化小屏幕下的视觉体验

内容的提问来源于stack exchange，提问作者JamesJPG