如何交换 2 个元素的边（一个是 float:left，另一个是 float:right）

Question

我有一个网站，一侧是图片，另一侧是文字。 这是它的样子：

正如您在图片中看到的那样 - 左边是一些文字，右边是图片。 然后你有一个左边的图像和右边的文字，（旋转）等..

这是我使用 jsfiddle 制作的一个简单示例：http://jsfiddle.net/fyawuuh1/1/

在移动设备上显示页面时 -（使用@media 查询）我想将图像组织为始终位于顶部，图像下方具有文本（无旋转），这意味着我将拥有:

• 图片
• 文字
• 图片
• 文字
• 图片
• 文字

我很难找到让它看起来像这样的方法。.

Answer 1

除了更改 html 结构外，您还可以使用 flexbox 通过 css 实现它：

#container {
  display: flex;
  flex-flow: column;
}
#divA {
  order: 2;
}
#divB {
   order: 1;
}