如何交换2个元素的边（一个有float：left，另一个是float：right） [英] How to swap sides of 2 elements (one with float:left, the other is with float:right)

问题描述

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

I have a website with an image on one side, and text on the other. This is how it looks:

如图所示 - 左边有一些文本，右边有图像。
然后你有一个左边的图像和右边的文本（旋转）ect ..

As you see in the image - there is some text on the left and image on the right. Then you have an image on the left and text to the right,(in rotation) ect..

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

This is a simple example I made using jsfiddle: http://jsfiddle.net/fyawuuh1/1/

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

When displaying the page on a mobile - (using @media queries) I want to organize the image to be always on top, and under the image to have text (no rotation), That means that I'll have:

• 图片


• 文字


• / li>
  
• 文字


• 图片


• 文字

• Image
• Text
• Image
• Text
• Image
• Text

我很难找到一个看起来像这样的方法。。

I am having difficulties finding a way getting it look like this..

推荐答案

可以使用 flexbox 实现它与css：

Besides changing the html structure u can use flexbox to achieve it with css:

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

这篇关于如何交换2个元素的边（一个有float：left，另一个是float：right）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！