Question

我需要帮助来改变php循环中的bootstrap列顺序，它计算两个div（带有类产品）。循环中的每两个div（带有类产品）包含两个带有相同顺序的bootstrap列（具有类图像和类描述的div），然后接下来的两个div（带有类产品）内部具有相反的bootstrap列顺序（带有类描述和类的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作为bootstrap列（带有类图像和类描述）。

此移动/平板电脑跨浏览器解决方案是否准备就绪？

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

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

2 个答案: