如何实现屏幕缩小时图片位于文本下方的响应式布局？

要实现屏幕缩小时图片移到文本下方、按钮保持居中的效果，只需在现有代码基础上做以下修改：

关键修改点 #

• 添加媒体查询，在小屏幕下切换flex容器的排列方向为垂直（column）
• 让图片自适应容器宽度，避免溢出
• 保留按钮的居中样式（已有代码已满足，无需额外调整）

修改后的完整代码 #

CSS代码 #

.textwithnav1 {
  display: flex;
  background-color: gold;
  justify-content: space-between;
  border: solid white 2px;
}
.container-text2 {
  background-color: #d4d4d4;
  height: auto;
  color: rgba(0, 0, 0, 0.783);
  border: solid 2px white;
  align-items: center;
  width: auto;
  margin: 15px;
}

.text22 h1 {
  margin-top: 25px;
  font-family: "roboto";
  font-size: 38px;
  text-align: center;
}
.text22 h1 span {
  border-bottom: solid 3px rgb(0, 0, 0);
}
.text22 p {
  margin-top: 20px;
  font-family: "roboto";
  font-size: 22px;
  line-height: 32px;
  text-align: center;
}
/* button onze prjecten home page */
.button22 button {
  border: 1px solid rgb(0, 0, 0);
  background: none;
  padding: 10px 20px;
  font-size: 24px;
  font-family: "roboto";
  color: rgba(0, 0, 0, 0.783);
  cursor: pointer;
  transition: 0.5s;
  display: block;
  margin: auto;
  margin-top: 75px;
}
.button22 button:hover {
  color: rgb(0, 0, 0);
  transform: scale(1.1);
  background-color: #979797;
}

/* onze prjecten foto */
.image22 {
  background-color: gold;
}
.image22 img {
  /* 修改：图片自适应容器宽度，避免溢出 */
  max-width: 100%;
  height: auto;
  margin: 15px;
  border: solid rgb(255, 255, 255) 3px;
}

/* 添加媒体查询：屏幕宽度小于1200px时触发 */
@media (max-width: 1200px) {
  .textwithnav1 {
    /* 切换为垂直排列，图片自动移到文本下方 */
    flex-direction: column;
    align-items: center; /* 让子元素居中对齐，优化视觉效果 */
  }
  .container-text2 {
    width: 90%; /* 小屏幕下文本容器占满大部分宽度，提升可读性 */
  }
}

HTML代码（无需修改） #

<div class="textwithnav1">
  <div class="container-text2">
    <div class="text22">
      <h1><span>Onze Project</span>en</h1>
      <p>
        Wij zijn aan hebben mogen bijdragen. Van het plaatsen
        van complete staalconstructies tot het bouwen van bruggen en het
        assisteren bij grootschalige bouwprojecten: wij hebben de juiste
        kranen en het juiste team om elk project tot een succes te maken.<br /><br />
        Wij staan bekend om onze flexibiliteit, betrouwbaarheid en
        vakmanschap en streven erverhuur op maat.
      </p>
    </div>
    <div class="button22">
      <button>Onze Projecten</button>
    </div>
  </div>
  <div class="image22"><img src="https://picsum.photos/200/300" /></div>
</div>

效果说明 #

• 屏幕宽度大于1200px时，保持原有的左右排列布局
• 屏幕宽度小于1200px时：
  • 图片自动移到文本区块下方
  • 文本容器宽度调整为90%，提升移动端可读性
  • 按钮始终保持居中（依赖原有margin: auto和display: block样式）

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