Javascript 在移动和平板电脑设备上更改PHP循环内的引导列顺序

我需要帮助更改php循环中的引导列顺序，该循环计数两个div（使用类product）。循环中的每两个div（带有类product）都包含两个引导列（带有类映像和类描述的div），顺序相同，然后接下来的两个div（带有类product）内部的引导列（带有类描述和类映像的div）顺序相反

php循环中的概念如下所示：

分区1（图像+描述）分区2（图像+描述）

分区3（描述+图像）分区4（描述）

等等，在php循环中

在桌面上一切都很好，但在移动设备上，我希望有一个正常的滚动布局，所有的div都有图像，然后是描述

完整代码：

<section class="products">
  <div class="container">

    <?php $sl=1; ?>
      <?php if(($sl==1)||($sl==2)) { ?>

        <div class="product col-lg-6 col-md-12 col-sm-12">
            <div class="image col-lg-6 col-md-6 col-sm-12">
                    <a href="#" class="moreLink">
                        <img src="" alt="" />
                    </a>
            </div>
            <div class="description col-lg-6 col-md-6 col-sm-12">
                <div class="product-description left-triangle">
                    <h3><a href="#" class="moreLink">Product Title</a></h3>
                    <p>Description text goes here...</p>
                    <a href="#" class="moreLink btn dark ">Details</a>
                </div>
            </div>
        </div>

        <?php
            $sl++; 
            }
        else 
            { ?>

        <div class="product col-lg-6 col-md-12 col-sm-12">
          <div class="description col-lg-6 col-md-6 col-sm-12">
            <div class="product-description right-triangle">
              <h3><a href="#" class="moreLink">Product Title</a></h3>
              <p>Description text goes here...</p>
              <a href="#" class="moreLink btn dark">Details</a>
            </div>
          </div>
          <div class="image col-lg-6 col-md-6 col-sm-12">
              <a href="#" class="moreLink">
                <img src="" alt="" />
              </a>
          </div>

        </div>

        <?php if($sl==3) 
            $sl++; 
        else 
            $sl=1; } ?>

  </div>
</section>

说明文字在这里

说明文字在这里

最简单的方法-使用css flexbox

---

如果我用类product（类flex容器）更改循环中div的flex项类，Flexbox就有意义了。如果我使用flex-item-a和flex-item-b作为引导列（带有类映像和类描述）

此解决方案是否支持移动/平板电脑跨浏览器？

<section class="products">
  <div class="container">

    <?php $sl=1; ?>
      <?php if(($sl==1)||($sl==2)) { ?>

        <div class="product col-lg-6 col-md-12 col-sm-12 flex-container">
            <div class="image col-lg-6 col-md-6 col-sm-12 flex-item-a">
                    <a href="#" class="moreLink">
                        <img src="" alt="" />
                    </a>
            </div>
            <div class="description col-lg-6 col-md-6 col-sm-12 flex-item-a">
                <div class="product-description left-triangle">
                    <h3><a href="#" class="moreLink">Product Title</a></h3>
                    <p>Description text goes here...</p>
                    <a href="#" class="moreLink btn dark ">Details</a>
                </div>
            </div>
        </div>

        <?php
            $sl++; 
            }
        else 
            { ?>

        <div class="product col-lg-6 col-md-12 col-sm-12 flex-container">
          <div class="description col-lg-6 col-md-6 col-sm-12 flex-item-b">
            <div class="product-description right-triangle">
              <h3><a href="#" class="moreLink">Product Title</a></h3>
              <p>Description text goes here...</p>
              <a href="#" class="moreLink btn dark">Details</a>
            </div>
          </div>
          <div class="image col-lg-6 col-md-6 col-sm-12 flex-item-b">
              <a href="#" class="moreLink">
                <img src="" alt="" />
              </a>
          </div>

        </div>

        <?php if($sl==3) 
            $sl++; 
        else 
            $sl=1; } ?>

  </div>
</section>

---

php不知道你的屏幕分辨率是多少，所以你需要使用js。是的，php不知道屏幕分辨率，但js也可能不是解决这个问题的好方法。它只是传递问题解决方案

.flex-container {
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  width:100%;
}

.flex-item-a:nth-of-type(1), .flex-item-b:nth-of-type(2) { order: 1; }
.flex-item-a:nth-of-type(2), .flex-item-b:nth-of-type(1) { order: 2; }

.flex-item-a, .flex-item-b { width: 100%; height:auto; }