响应式磁贴内容问题。如何始终在文本上方显示图像？

Question

我目前正在开发一个页面，该页面需要备用内容才能响应，但图像保留在每个部分的文本上方。例如，这里是一个模拟页面布局的样子：

使用自适应列，这就是页面在移动设备上的显示方式：

如您所见，图像位于第2，第4，第6部分的文本下方，等等。

因此，当缩小尺寸时，每个部分的图像始终显示在每个部分的文本之前。我们尝试了各种方法，似乎无法使其发挥作用。

任何css示例和帮助都将受到广泛赞赏。

Answer 1

根据您提供的信息，以下是不使用小屏幕时使用float: left和float: right属性的快速解决方案，具体取决于行是奇数还是偶数。这是主要的CSS代码：

@media (min-width: 600px) {
  div {
    width: 50%;
  }
  li:nth-child(2n) > div.image {
    float: left;
  }
  li:nth-child(2n + 1) > div.image {
    float: right;
  }
  li:nth-child(2n) > div.text {
    float: right;
  }
  li:nth-child(2n + 1) > div.text {
    float: left;
  }
}

这是完整的示例代码： https://jsfiddle.net/zxba9mw3/