Css 如何解决这个问题

我需要一些帮助来解决这个数学网格布局问题。也许我只是想得太多了，但我似乎找不到一种方法来编码这个网格，所以它的工作原理与下图所示完全相同

原件：

通缉：

第一个断点和第二个断点之间的区别基本上是一个响应断点。我们从3列布局改为2列布局。为了便于访问，这必须是一个ul，里面有li

当使用不同的html元素（如div和article）时，我有一个可行的解决方案，在这种情况下：

@for $i from 1 through 30 {
    div:nth-of-type(#{$i * 2 - 1}), article:nth-of-type(#{$i * 2}) {
        order:#{$i * 2 - 1};
        @include flex(0 0 50%);
    }

    article:nth-of-type(#{$i * 2 - 1}), section:nth-of-type(#{$i * 2}) {
        order:#{$i * 2};
    }
}

更清楚的是，下面是网格中每个块的预期行为

Original order --> New order
1     -->     1
2     -->     2
3     -->     5
4     -->     3
5     -->     4
6     -->     7
7     -->     6
8     -->     9
9     -->     10
10     -->     8
11     -->     11
12     -->     12

---

我正在寻找一个公式来计算新的订单位置。

不知道如何在你的语言中应用这个，所以我将提供C++示例来代替（只提取公式）。第二个例子很简单：

const int xs=3;                     // max numer of numbers in line
const int ys=9;                     // nuber of lines
AnsiString layout()
    {
    AnsiString txt;
    int i,x,y;
    for (i=1,x=0,y=0;y<ys;i++)
        {
        if (i<100) txt+=" ";        // align to 3 digits
        if (i< 10) txt+=" ";
        txt+=" "+AnsiString(i);     // add number to layout text
        if (y%(xs+1)==0) { x++; if (x>=xs) { x=0; y++; txt+="\r\n"; }}  // xs numbers per line
        else                                    { y++; txt+="\r\n"; }   // single number per line
        }
    return txt;
    }

• AnsiString

  只是来自VCL
• 我将结果输出为字符串

  txt

  ，因此只需将其更改为您的输出类型

• “\r\r”

  表示行尾

• x，y

  是项目

  i

  的实际位置，因此您可以使用它来定位单元格

• a%b

  是

  a/b

第一个例子不够长，无法从中得到公式。实际提供的块不是规则的。如果您只是有一个bug，并且算法是相同的，那么只需将

xs

常量更改为

xs=2

，在这种情况下，输出如下所示：

   1   2
   3
   4
   5   6
   7
   8
   9  10
  11
  12

---

不知道如何在你的语言中应用这个，所以我将提供C++示例来代替（只提取公式）。第二个例子很简单：

const int xs=3;                     // max numer of numbers in line
const int ys=9;                     // nuber of lines
AnsiString layout()
    {
    AnsiString txt;
    int i,x,y;
    for (i=1,x=0,y=0;y<ys;i++)
        {
        if (i<100) txt+=" ";        // align to 3 digits
        if (i< 10) txt+=" ";
        txt+=" "+AnsiString(i);     // add number to layout text
        if (y%(xs+1)==0) { x++; if (x>=xs) { x=0; y++; txt+="\r\n"; }}  // xs numbers per line
        else                                    { y++; txt+="\r\n"; }   // single number per line
        }
    return txt;
    }

• AnsiString

  只是来自VCL
• 我将结果输出为字符串

  txt

  ，因此只需将其更改为您的输出类型

• “\r\r”

  表示行尾

• x，y

  是项目

  i

  的实际位置，因此您可以使用它来定位单元格

• a%b

  是

  a/b

第一个例子不够长，无法从中得到公式。实际提供的块不是规则的。如果您只是有一个bug，并且算法是相同的，那么只需将

xs

常量更改为

xs=2

，在这种情况下，输出如下所示：

   1   2
   3
   4
   5   6
   7
   8
   9  10
  11
  12

---

你知道你需要写什么样的CSS来完成这项工作吗？没有javascript或jquery可以完成吗？只有CSS。如果找不到公式，我将手动分配顺序，因为这不会是动态的，并且不会有超过30个元素。顺序非常混乱，你无法使用纯CSS来重新排列它们。你知道你需要编写什么CSS来完成任务吗？这可以在没有javascript或jquery的情况下完成吗？仅CSS。如果找不到公式，我将手动分配顺序，因为这不会是动态的，而且元素也不会超过30个。顺序太乱了，你无法使用纯CSS来重新排列它们。