使用CSS切换块元素的顺序

Question

短篇故事假设我的HTML已经固定下来：<div id="blockA">Block A</div><div id="blockB">Block B</div><div id="blockC">Block C</div>它看起来像这样：------------| Block A  |------------| Block B  |------------| Block C  |------------现在，我想切换块的顺序。我该如何仅使用CSS来做到这一点？------------| Block C  |------------| Block A  |------------| Block B  |------------我知道有一些骇人听闻的解决方案，例如using position:absolute，但这不能保留该display:block属性的有效使用。也就是说，块随着大小的增加而向下推动其他块。很长的故事当用户使用计算机查看我的网页时，这些块将按以下顺序显示：基本信息。活动时间表。iPhone应用广告iPhone应用程序广告排在最后，因为它对计算机用户而言并不十分重要。一小部分计算机用户会拨出电话并安装该应用程序。如果移动用户访问此网站，则iPhone应用广告应该是页面上最重要的内容。因此，应将其移至顶部：iPhone应用广告基本信息。活动时间表。我希望iPhone和计算机用户共享相同的HTML，但是让CSS媒体查询切换块的顺序。@media only screen and (max-device-width: 480px) {   #blockC {      /* magic order switching */   }}

Answer 1

两种轻量级CSS解决方案：

使用柔性，柔性流动和顺序：

    body{

        display:flex;

        flex-flow: column;

    }

    #blockA{

        order:4;

    }

    #blockB{

        order:3;

    }

    #blockC{

        order:2;

    }

或者，反转Y比例尺：

body{

    -webkit-transform: scaleY(-1);

    transform: scaleY(-1);

}

div{

    -webkit-transform: scaleY(-1);

    transform: scaleY(-1);

}