изменение порядка строк

Question

У меня есть ряд элементов ".row" bootstrap, которые являются последовательными, как показано ниже:

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