Css 具有交替反转行且不带行标记的表格样式布局

我试图用CSS实现以下布局，每个数字都是一块宽度相等的内容块：

移动视图：

1
2
3
4
5
6
7
8

桌面视图：

1 | 2
-----
4 | 3
-----
5 | 6
-----
8 | 7

请注意，3-4和7-8在桌面布局中是相反的

由于3-4和7-8没有语义链接，我不希望将它们与父HTML元素耦合在一起（因此显示：表布局可能不是一个选项）

在桌面视图中，元素1的高度必须与元素2相同，元素3的高度必须与元素4相同，等等，但是这个高度事先不知道，我也不想使用JavaScript（所以浮点数是向外的，因为它们的高度不同，除非有使用CSS calc的方法）

那么，假设1-8都是来自同一个父div的section元素，没有JavaScript怎么能做到这一点呢

我不确定是否有解决方案，但我认为这是CSS应该能够支持的——因此答案可以包括草稿或基本上不受支持的CSS。

float 3、4、7和8 right 就像这里：

---

Flexbox可以做到这一点，但它需要事先知道有多少元素

请注意，这只适用于支持Flexbox和包装的浏览器。目前的浏览器支持：Chrome、Opera、IE10、Blackberry 10（Firefox很快就会有）

---

根据cimmanon的回答和我随后的评论，我能够使用flexbox、包装和相对定位的组合

CSS:

HTML:

1.知识产权是一种权利，是一种权利，是一种权利，是一种权利
二,
三,
4洛雷姆·伊普苏姆·多洛尔·希特（Lorem ipsum Door sit amet）是一位杰出的献身者，他是一位临时劳工和职业经理人
五,
六,
7洛雷姆·伊普苏姆·多洛尔·希特（Lorem ipsum Door sit amet）是一位杰出的献身者，他是一位临时劳工
八,

---

谢谢，尽管您在每个div上都设置了一个高度：“高度事先不知道”以及“元素1需要与元素2相同的高度等”，例如类似于#3:：before{content:'}#4:：before{content:'}会有所帮助，但是content属性不能包含Htmlar您保证有特定数量的元素，还是未知？我知道元素的数量，但我更喜欢不依赖于此的解决方案，即使用：nth child看起来很棒，遗憾的是我无法将第n个child变量传递给order属性，如：li:nth child（4n）{order:4n-1；}li:n第n个子（4n-1）{order:4n+1；}我当前的行标记解决方案使用相对定位来切换奇数行（左：-100%，左：100%），我可能会将这一点和您的建议结合起来使用。谢谢！请注意，在非Flexbox浏览器中，这可能会产生不良后果。他们会忽略Flexbox属性，但尊重相对定位。

.three, .four, .seven, .eight{
    float:right;
}

ul {
  width: 5em;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
@supports (flex-wrap: wrap) { /* hide from experimental Firefox */
  ul {
    display: flex;
  }
}

li {
  -webkit-flex: 1 50%;
  -ms-flex: 1 50%;
  flex: 1 50%;
}

li:nth-child(3),
li:nth-child(5),
li:nth-child(6) {
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}

li:nth-child(4) {
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

li:nth-child(7) {
  -ms-flex-order: 4;
  -webkit-order: 4;
  order: 4;
}

li:nth-child(8) {
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
}

ul {
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
@supports (flex-wrap: wrap) {
  ul {
    display: flex;
  }
}

li {
  -webkit-flex: 1 50%;
  -ms-flex: 1 50%;
  flex: 1 50%;
  outline: 1px solid red;
  width: 50%;
}

li:nth-child(4n) {
  position: relative;
  left: -50%;
}

li:nth-child(4n-1) {
  position: relative;
  left: 50%;
}

<ul>
  <li>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li>
  <li>2</li>
  <li>3</li>
  <li>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>5</li>
  <li>6</li>
  <li>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
  <li>8</li>
</ul>