CSS布局,使用CSS重新排序DIV

Question

鉴于HTML

<div>
   <div id="content1"> content 1</div>
   <div id="content2"> content 2</div>
   <div id="content3"> content 3</div>
</div>

呈现为

content 1
content 2
content 3

我的问题:

有没有办法在不更改HTML部分的情况下仅使用CSS来渲染它.

content 1
content 3
content 2

Answer 1

这可以在支持CSS3 flexbox概念的浏览器中完成,尤其是属性flexbox-order.

看到这里

但是,对此的支持仅适用于大多数浏览器的当前版本.

编辑时间继续,Flexbox支持改进..

Answer 2

这对我有用:http: //tanalin.com/en/articles/css-block-order/

此页面的示例:

HTML

<div id="example">
  <div id="block-1">First</div>
  <div id="block-2">Second</div>
  <div id="block-3">Third</div>
</div>

CSS

#example {display: table; width: 100%; }

#block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */
#block-2 {display: table-row-group;    } /* Will be displayed in the middle */
#block-3 {display: table-header-group; } /* Will be displayed at the top */

如上所述,这应该适用于大多数浏览器.查看链接以获取更多信息.

Answer 3

它可能与您所追求的完全匹配,但请看一下这个问题:
在HTML中不按顺序将CSS定位在另一个div之上

基本上,你必须使用Javascript才能以任何方式可靠.