Реверсивное отображение элементов Лента новостей

Question

Я хочу зарезервировать каждую ячейку элемента box1 справа налево каждый час, и каждые 24 часа / сутки элемент box1, box2 и box 3 будетвверх снизу ..

.box {
  display: flex;
  flex-direction: row;
}
.box :nth-child(1) { order: 4; }
.box :nth-child(2) { order: 1; }
.box :nth-child(3) { order: 2; }
.box :nth-child(4) { order: 3; }

<div class="box" id="box1">
  <div><a href="#">One</a></div>
  <div><a href="#">Two</a></div>
  <div><a href="#">Three</a></div>
  <div><a href="#">Four</a></div>
</div>
<div class="box" id="box2">
  <div><a href="#">One</a></div>
  <div><a href="#">Two</a></div>
  <div><a href="#">Three</a></div>
  <div><a href="#">Four</a></div>
</div>
<div class="box" id="box3">
  <div><a href="#">One</a></div>
  <div><a href="#">Two</a></div>
  <div><a href="#">Three</a></div>
  <div><a href="#">Four</a></div>
</div>
<div class="box" id="box4">
  <div><a href="#">One</a></div>
  <div><a href="#">Two</a></div>
  <div><a href="#">Three</a></div>
  <div><a href="#">Four</a></div>
</div>

выше мой код ... просто можно зарезервировать внутри поля "справа налево", но снизу вверх еще нет ..

Answer 1

Вы можете переупорядочить целые строки точно так же, как вы переупорядочили элементы одного ряда.Примените display: flex; к элементу контейнера, но на этот раз установите flex-direction: column;.Теперь вы можете изменить порядок строк с атрибутом order:

.box {
  display: flex;
  flex-direction: row;
}
.box :nth-child(1) { order: 4; }
.box :nth-child(2) { order: 1; }
.box :nth-child(3) { order: 2; }
.box :nth-child(4) { order: 3; }

.container {
  display: flex;
  flex-direction: column;
}
.container :nth-child(1) { order: 4; }
.container :nth-child(2) { order: 1; }
.container :nth-child(3) { order: 2; }
.container :nth-child(4) { order: 3; }

<div class="container">
  <div class="box" id="box1">
    <div><a href="#">1 One</a></div>
    <div><a href="#">1 Two</a></div>
    <div><a href="#">1 Three</a></div>
    <div><a href="#">1 Four</a></div>
  </div>
  <div class="box" id="box2">
    <div><a href="#">2 One</a></div>
    <div><a href="#">2 Two</a></div>
    <div><a href="#">2 Three</a></div>
    <div><a href="#">2 Four</a></div>
  </div>
  <div class="box" id="box3">
    <div><a href="#">3 One</a></div>
    <div><a href="#">3 Two</a></div>
    <div><a href="#">3 Three</a></div>
    <div><a href="#">3 Four</a></div>
  </div>
  <div class="box" id="box4">
    <div><a href="#">4 One</a></div>
    <div><a href="#">4 Two</a></div>
    <div><a href="#">4 Three</a></div>
    <div><a href="#">4 Four</a></div>
  </div>
</div>