我这样从php端显示元素：
<?php foreach ($cases as $case) { ?>
<div class="case">
<div class="row">
<div class="col-6">
<img src="<?= $case->getImageUrl() ?>">
</div>
<div class="col-6">
<div class="text"><?= $case->text ?></div>
</div>
</div>
</div>
<?php } ?>
在html页面上它们看起来像这样
.case {
padding: 50px;
}
img {
width: 300px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="case">
<div class="row">
<div class="col-6">
<img src="https://i.imgur.com/JMHHMVl.jpg">
</div>
<div class="col-6">
<div class="text">case 1</div>
</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-6">
<img src="https://i.imgur.com/m3cq9ez.jpg">
</div>
<div class="col-6">
<div class="text">case 2</div>
</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-6">
<img src="https://i.imgur.com/IKXSAiw.jpg">
</div>
<div class="col-6">
<div class="text">case 3</div>
</div>
</div>
</div>
是否可以使col-6交替交换，使页面上的元素以棋盘格的形式显示，像这样
.case {
padding: 50px;
}
img {
width: 300px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="case">
<div class="row">
<div class="col-6">
<img src="https://i.imgur.com/JMHHMVl.jpg">
</div>
<div class="col-6">
<div class="text">case 1</div>
</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-6">
<div class="text">case 2</div>
</div>
<div class="col-6">
<img src="https://i.imgur.com/m3cq9ez.jpg">
</div>
</div>
</div>
<div class="case">
<div class="row">
<div class="col-6">
<img src="https://i.imgur.com/IKXSAiw.jpg">
</div>
<div class="col-6">
<div class="text">case 3</div>
</div>
</div>
</div>
自从bootstrap切换到
display: flex，就可以使用纯现代CSS来实现这样的效果：.case:nth-of-type(2n) .row{ flex-direction: row-reverse; }不需要对HTML进行任何更改。