更改每隔一行的顺序

Question

我有一系列".row“引导程序元素，它们是连续的，如下所示：

            <div class="row">
                <div class="col-4">
                    <div class="elem">1</div>
                </div>
                <div class="col-4">
                    <div class="elem">2</div>
                </div>
                <div class="col-4">
                    <div class="elem">3</div>
                </div>
            </div>

            <div class="row">
                <div class="col-4">
                    <div class="elem">4</div>
                </div>
                <div class="col-4">
                    <div class="elem">5</div>
                </div>
                <div class="col-4">
                    <div class="elem">6</div>
                </div>
            </div>

            <div class="row">
                <div class="col-4">
                    <div class="elem">7</div>
                </div>
                <div class="col-4">
                    <div class="elem">8</div>
                </div>
                <div class="col-4">
                    <div class="elem">9</div>
                </div>
            </div>

我想用CSS动态地改变每一行的顺序。有人能帮我吗？

所需的输出：

​

​

Answer 1

这里有一个使用Bootstrap的简单解决方案。

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="elem">1</div>
    </div>
    <div class="col-4">
      <div class="elem">2</div>
    </div>
    <div class="col-4">
      <div class="elem">3</div>
    </div>
  </div>
  <div class="row flex-row-reverse">
    <div class="col-4">
      <div class="elem">4</div>
    </div>
    <div class="col-4">
      <div class="elem">5</div>
    </div>
    <div class="col-4">
      <div class="elem">6</div>
    </div>
  </div>
  <div class="row">
    <div class="col-4">
      <div class="elem">7</div>
    </div>
    <div class="col-4">
      <div class="elem">8</div>
    </div>
    <div class="col-4">
      <div class="elem">9</div>
    </div>
  </div>
</div>