在内容展示类网站开发中，图片与文本交替出现的布局是非常常见的需求，比如产品介绍页、资讯列表页等场景都需要用到。通过PHP处理后端数据，结合Bootstrap的栅格系统，我们可以快速实现响应式的动态交替布局，无需手动编写大量适配不同屏幕的样式代码。
实现思路梳理
整个实现过程分为三个核心部分：首先是PHP端准备需要展示的交替内容数据，其次是定义Bootstrap的栅格结构作为布局容器，最后通过PHP循环判断实现图片和文本的位置交替渲染。这种方式的优势在于内容数据可以动态从数据库或接口获取，布局规则固定后只需要更新数据就能自动生成新的交替效果。
后端数据准备
我们首先用PHP定义一个包含图片地址、文本内容、标题等信息的数组，模拟从数据库获取的数据，实际开发中可以将这部分替换为数据库查询逻辑。
<?php
// 模拟从数据库获取的交替内容数据
$contentList = [
[
'type' => 'image_left', // 标记当前项为图片在左文本在右
'title' => '第一款产品介绍',
'image' => 'https://ipipp.com/product1.jpg',
'text' => '这是第一款产品的详细介绍内容，包含产品的核心功能和使用场景说明。'
],
[
'type' => 'image_right', // 标记当前项为图片在右文本在左
'title' => '第二款产品介绍',
'image' => 'https://ipipp.com/product2.jpg',
'text' => '这是第二款产品的详细介绍内容，适合有特定需求的用户群体使用。'
],
[
'type' => 'image_left',
'title' => '第三款产品介绍',
'image' => 'https://ipipp.com/product3.jpg',
'text' => '这是第三款产品的详细介绍内容，主打高性价比和易用性。'
]
];
?>前端布局实现
我们使用Bootstrap 5的栅格系统来构建布局容器，通过row和col类实现分栏，同时利用Bootstrap的响应式类适配不同屏幕尺寸。交替逻辑通过PHP循环判断当前项的类型，调整列的顺序来实现。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态图片文本交替布局</title>
<link href="https://ipipp.com/bootstrap.min.css" rel="stylesheet">
<style>
.content-item {
margin-bottom: 40px;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
.content-img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 8px;
}
.content-text {
padding: 20px;
}
.content-text h3 {
margin-bottom: 15px;
color: #333;
}
.content-text p {
color: #666;
line-height: 1.8;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center my-5">产品介绍列表</h1>
<?php foreach ($contentList as $item): ?>
<div class="row content-item align-items-center">
<?php if ($item['type'] == 'image_left'): ?>
<!-- 图片在左 文本在右 -->
<div class="col-md-6">
<img src="<?php echo $item['image']; ?>" alt="<?php echo $item['title']; ?>" class="content-img">
</div>
<div class="col-md-6 content-text">
<h3><?php echo $item['title']; ?></h3>
<p><?php echo $item['text']; ?></p>
</div>
<?php else: ?>
<!-- 图片在右 文本在左 -->
<div class="col-md-6 content-text">
<h3><?php echo $item['title']; ?></h3>
<p><?php echo $item['text']; ?></p>
</div>
<div class="col-md-6">
<img src="<?php echo $item['image']; ?>" alt="<?php echo $item['title']; ?>" class="content-img">
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
</body>
</html>逻辑说明
上述代码中，我们给每个数据项增加了type字段用来标记布局类型，PHP循环时根据type的值调整图片和文本列的先后顺序。如果是image_left就先渲染图片列再渲染文本列，如果是image_right就先渲染文本列再渲染图片列，这样就实现了交替效果。
如果想要更灵活的交替规则，也可以不用type字段，直接用循环索引判断：索引为偶数时图片在左，奇数时图片在右，代码如下：
<?php foreach ($contentList as $index => $item): ?>
<div class="row content-item align-items-center">
<?php if ($index % 2 == 0): ?>
<div class="col-md-6">
<img src="<?php echo $item['image']; ?>" alt="<?php echo $item['title']; ?>" class="content-img">
</div>
<div class="col-md-6 content-text">
<h3><?php echo $item['title']; ?></h3>
<p><?php echo $item['text']; ?></p>
</div>
<?php else: ?>
<div class="col-md-6 content-text">
<h3><?php echo $item['title']; ?></h3>
<p><?php echo $item['text']; ?></p>
</div>
<div class="col-md-6">
<img src="<?php echo $item['image']; ?>" alt="<?php echo $item['title']; ?>" class="content-img">
</div>
<?php endif; ?>
</div>
<?php endforeach; ?>响应式适配说明
我们使用的是Bootstrap的col-md-6类，在屏幕宽度大于等于768px时，图片和文本各占一半宽度并排显示；在屏幕宽度小于768px时，会自动堆叠显示，先显示图片再显示文本，或者根据列的顺序先显示文本再显示图片，完全符合移动端阅读习惯，不需要额外编写媒体查询代码。
如果需要调整移动端的显示顺序，可以给列添加order-md-*类，比如在小屏幕上强制图片在上文本在下，只需要给图片列添加order-1，文本列添加order-2即可，Bootstrap会自动处理不同屏幕下的顺序逻辑。