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

Question

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

php循环中的概念是这样的：

DIV_1（图片+描述）DIV_2（图片+描述）

DIV_3（描述+图片）DIV_4（描述）

php循环中的等等

一切都在桌面上运行良好，但在移动设备上，我希望在滚动时有正常的布局，所有 div 将首先有 IMAGE，然后是描述。

完整代码：

<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>

Answer 1

最简单的方法 - 使用 css flexbox https://css-tricks.com/almanac/properties/o/order/

Answer 2

如果我使用类产品（类 flex-container）在循环中更改 div 的 flex-item 类，则 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>

带有css样式：

.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; }