时间戳

首页 > 解决方案 > 重新排序不同容器中的 html 元素

javascript - 重新排序不同容器中的 html 元素

问题描述

我尝试按照特定逻辑重新排序我的项目，但无法使用 css 网格完成。我有这个html结构：

<div class="multi-column-row">
<div class="row">
    <div>ITEM 1</div>
    <div>ITEM 2</div>
    <div>ITEM 3</div>
</div>
<div class="row">
    <div>ITEM 4</div>
    <div>ITEM 5</div>
    <div>ITEM 6</div>
</div>
<div class="row">
    <div>ITEM 7</div>
    <div>ITEM 8</div>
    <div>ITEM 9</div>
</div>
</div>

在桌面上，行是水平显示的，所以它看起来像这样：

ITEM 1 | ITEM 4 | ITEM 7
ITEM 2 | ITEM 5 | ITEM 8
ITEM 3 | ITEM 6 | ITEM 9

现在我想要实现的是当行垂直显示时在移动设备上跟随：

ITEM 1
ITEM 4
ITEM 7
ITEM 2
ITEM 5
ITEM 8
ITEM 3
ITEM 6
ITEM 9

即使列中的项目更多或更少，它也必须工作。在你问为什么我不直接按这个顺序放置项目并且有三行每列 3 列之前:) 是因为在桌面上我需要 3 列，里面有多个项目，就像一个砖石网格。

我感谢每一个帮助，甚至是重新排序 dom 元素的 javascript 解决方案

标签： javascripthtmljquerycssresponsive

解决方案

这个答案不能很好地扩展，但可以使用 flexbox，display:contents然后对.rowdiv 的内容进行排序。

.multi-column-row {
  display: flex;
  flex-direction: column;
}

.multi-column-row .row {
  display: contents;
}

.multi-column-row .row :nth-child(1) {
  order: 1;
}

.multi-column-row .row :nth-child(2) {
  order: 2;
}

.multi-column-row .row :nth-child(3) {
  order: 3;
}
<div class="multi-column-row">
  <div class="row">
    <div>ITEM 1</div>
    <div>ITEM 2</div>
    <div>ITEM 3</div>
  </div>
  <div class="row">
    <div>ITEM 4</div>
    <div>ITEM 5</div>
    <div>ITEM 6</div>
  </div>
  <div class="row">
    <div>ITEM 7</div>
    <div>ITEM 8</div>
    <div>ITEM 9</div>
  </div>
</div>

推荐阅读