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

鉴于HTML

   
 content 1
   
 content 2
   
 content 3

呈现为

content 1
content 2
content 3

我的问题:

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

content 1
content 3
content 2

Luke H.. 29

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

看到这里

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

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

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

看到这里

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

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

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

此页面的示例:

HTML

  
First
  
Second
  
Third

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 */

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

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

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