更改行顺序每隔一个答案

【问题标题】：changing rows order every other one更改行顺序每隔一个
【发布时间】：2020-01-19 13:28:08
【问题描述】：

我有一系列连续的“.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 动态地改变行顺序。有人可以帮我吗？

想要的输出：

【问题讨论】：

??? 每隔一个行顺序，2行，你想倒序吗？您的问题不清楚。
我想动态反转订单每隔一行。假设我可能有'n'行。谢谢
问题不清楚。发布所需输出的任何 jpeg 表示形式。
编辑了我的问题
使用自定义 css 并使用 row:nth(odd) 并添加样式以进行逆序

标签： html css sass

【解决方案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>

【讨论】：

我知道这一点，但我的结果是动态生成的，所以我需要 CSS 或其他可以动态生成的解决方案。
纯 CSS 方式是：.row:nth-child(even){ flex-direction: row-reverse; }，这就是帮助类 flex-row-reverse 可能正在做的事情，正如 Tom 所建议的那样。
作为旁注，我强烈推荐这个指南，它讨论了 flexbox 可以为你做的许多美妙的事情，包括颠倒元素的顺序：css-tricks.com/snippets/css/a-guide-to-flexbox