更改行的顺序

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>