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

Question

我尝试按照特定逻辑重新排序我的项目，但无法使用 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 列，里面有多个项目，就像一个砖石网格。

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

Answer 1

您可以添加媒体查询(https://www.w3schools.com/css/css_rwd_mediaqueries.asp)

ul {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  list-style-type: none;
}
<html>
<head>
</head>
<body>
<nav>
<ul>
  <li>Home</li>
  <li>Contact us</li>
  <li>Report</li>
</ul>
</nav>
</body>
</html>

Answer 2

使用显示作为内联和内联块，您可以更改。此外，如果您将媒体查询添加到逻辑中，布局将根据屏幕宽度发生变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (max-width: 480px)  {
            .row {
                display: inline;
            }
        }
        @media screen and (min-width: 480px)  {
            .row {
                display: inline-block;
            }
        }
    </style>
</head>
<body>
    <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>
</body>
</html>

Answer 3

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

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

Answer 4

您的移动显示示例重复 ITEM 3。我认为这是一个错误。我想一定是 ITEM 2 ?!

在我的示例中，row 类被删除，然后通过媒体查询对元素进行排序。

我将所有逻辑包装在 onresize 事件中。这样做是为了直观地了解更换浏览器时的操作原理window。在生产中，它需要替换为 window onload 事件。像那样：

window.onload = function() {
   ... 
}

js中的逻辑是从屏幕767 pixels触发的。

这样的结果有必要吗？

window.onresize = function() {
  let media = window.matchMedia("(min-width: 767px)");
  let unwrap_div = document.querySelectorAll('.multi-column-row .row');

  if (media.matches) {
    unwrap_div.forEach(function(unwrap_div_curr) {
      unwrap_div_curr.outerHTML = unwrap_div_curr.innerHTML;
    })
  } else {} 
}

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

@media (max-width: 767px) {

  .multi-column-row div:nth-child(1) {
    order: 1;
  }
  
  .multi-column-row div:nth-child(2) {
    order: 7;
  }
  
  .multi-column-row div:nth-child(3) {
    order: 4;
  }
  
  .multi-column-row div:nth-child(4) {
    order: 2;
  
  }
  
  .multi-column-row div:nth-child(5) {
    order: 5;
  }
  
  .multi-column-row div:nth-child(6) {
    order: 8; 
  }
  
  .multi-column-row div:nth-child(7) {
    order: 3; 
  }
  
  .multi-column-row div:nth-child(8) {
    order: 6;
  }
  
  .multi-column-row div:nth-child(9) {
    order: 9;
  }
  
}

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

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

Reordering html elements within different containers

html

javascript

css

jquery

responsive