用文本和照片交换列(html、css和php)

Question

我正在制作一个网站，其中显示了一个栅格的照片，在照片的左边或右边有一点描述。我希望文本每次发生变化时出现的一侧，所以当您有Photo1时，文本在左边，Photo2在右边。现在的情况是，它需要从文件夹中读取图像和文本文件，所以我使用php实现了这个目标。现在是我的问题，我如何得到正确的php，所以它显示了我想要它显示的？

我现在的代码(有点混乱)：

<li class='row' id='fotos'>
<?php
$dirname1 = "../images/text/";
    $text = scandir($dirname1);
    $dirname = "../images/images/";
    $images = scandir($dirname);
    $ignore = array(".", "..");
    foreach($images as $curimg){
  
        if(!in_array($curimg, $curtext, $ignore)) {

    
    echo "
<div class='image'>
  <img class='img' src='".$dirname.$curimg."'>
</div>
";
        }
    }

?>
</li>

这是我找到的代码，用来交换div：

科德芬

有人谁知道如何实现这一点或使我的代码工作，谢谢你已经！！

(谢谢你抽出时间)

编辑：

我想要这样的东西：

    <?php
  $dirname = "images-9/images/images/";
  $dirname1 = "images-9/images/text/";
  $text = scandir($dirname1);
  $images = scandir($dirname);
  $ignore = array(".", "..");
  foreach($images as $curimg)($text as $curtext){
          if(!in_array($curimg, $curtext, $ignore)) {
      echo "
      <div class='container'>
        <div class='row'>
          <div class='col-6 order-1'>
            <img src='".$dirname.$curimg."'
          </div>
          <div class='col-6 order-2'>
            <p><iframe src='".$dirname1.$curtext."'
          </div>
        </div>
  
  ";
    }
  }

?>

但我知道这个密码行不通。有办法让这件事奏效吗？

Answer 1

使用内置到引导程序中的定序，只需在两个类名之间切换即可。

​

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-6 order-1">
      1
    </div>
    <div class="col-6 order-2">
      text
    </div>
  </div>
  <div class="row">
    <div class="col-6 order-2">
      2
    </div>
    <div class="col-6 order-1">
      text
    </div>
  </div>
  <div class="row">
    <div class="col-6 order-1">
      3
    </div>
    <div class="col-6 order-2">
      text
    </div>
  </div>
</div>

​