如何用Flexbox实现适配桌面与平板的特定响应式布局？

当然可以用Flexbox搞定这个布局，完全不用那些繁琐的方案！我来帮你梳理下问题和解决办法：

你之前的代码问题在于把顶部文本块单独放在了一个row容器里，导致桌面端时这个文本块占满了整行，后面的列表文本和图片只能挤到下一行，自然会出现列表跑到图片下方的情况。我们只需要调整HTML结构，把相关元素放进合适的Flex容器，再配合媒体查询就能实现需求。

调整后的HTML结构 #

我们把左边的两个文本块放进同一个子容器，和图片一起放在外层Flex容器里，这样更容易控制布局：

<div class="flex-container">
  <div class="left-column">
    <div class="top-text">
      <p>Top aligned text goes here </p>
    </div>
    <div class="list-text">
      <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
      </ul>
    </div>
  </div>
  <div class="image-block">
    <img src="your-image-url.jpg" alt="描述你的图片内容">
  </div>
</div>

对应的CSS样式 #

通过Flex属性和媒体查询，分别定义桌面和平板的布局规则：

/* 基础Flex容器设置 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 元素间的间距，可根据需求调整 */
}

/* 左边文本列设置为垂直排列 */
.left-column {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* 两个文本块之间的间距 */
}

/* 桌面端布局（屏幕宽度≥992px） */
@media (min-width: 992px) {
  .flex-container {
    flex-wrap: nowrap; /* 强制不换行，让左右两部分并排 */
  }
  .left-column {
    flex: 7; /* 对应你原来的col-lg-7，占7份宽度 */
  }
  .image-block {
    flex: 5; /* 对应col-lg-5，占5份宽度 */
    align-self: flex-start; /* 关键！让图片顶部和左边文本对齐，避免被拉伸 */
  }
}

/* 平板端布局（屏幕宽度≤991px） */
@media (max-width: 991px) {
  .top-text {
    width: 100%; /* 顶部文本块占满全屏宽度 */
  }
  /* 列表文本和图片各占50%宽度，保持并排 */
  .list-text, .image-block {
    flex-basis: calc(50% - 0.5rem);
    min-width: 250px; /* 确保小屏幕下不会过度挤压 */
  }
}

关键说明 #

• align-self: flex-start：这个属性能让图片保持自身高度，不会被Flex容器拉伸成和左边两个文本块一样高，完美匹配你要的桌面端效果。
• gap属性：用来替代margin控制元素间距，避免外边距折叠的问题，布局更整洁。
• 媒体查询的断点（992px）可以根据你的实际需求调整，和Bootstrap的默认断点保持一致的话，适配起来更顺手。

这样调整后，桌面端左边两个文本块会垂直叠放在图片左侧，平板端顶部文本块全屏，下面列表和图片并排，完全符合你的需求，而且不需要用负margin或者相对定位这种不稳定的方案~

备注：内容来源于stack exchange，提问作者Anne