【问题标题】：Switching the order of block elements with CSS [duplicate]使用 CSS 切换块元素的顺序 [重复]
【发布时间】：2019-09-11 08:38:47
【问题描述】：

短篇小说

假设我的 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  |
------------

我知道有一些 hacky 解决方案，例如使用 position:absolute，但这并不能保留 display:block 属性的有效使用。也就是说，当它们变大时，块会向下推动其他块。

长篇大论

当用户使用电脑查看我的网页时，区块按如下顺序显示：

一般信息。
活动日程。
iPhone 应用广告

iPhone 应用程序广告放在最后，因为它对计算机用户来说并不是非常重要。一小部分计算机用户会拿出手机安装应用。

如果移动用户来到这个网站，iPhone 应用广告应该是页面上最重要的东西。因此，它应该移到顶部：

iPhone 应用广告
一般信息。
活动日程。

我希望 iPhone 和计算机用户共享相同的 HTML，但有一个 CSS 媒体查询来切换块的顺序。

@media only screen and (max-device-width: 480px) {
   #blockC {
      /* magic order switching */
   }
}

【问题讨论】：

如果你介意我问一下，为什么你需要只使用 CSS？
position: absolute 不会改变 display: block。
position:absolute 没有保留 display:block 的堆叠和推送特性，这是拥有块元素的全部意义。
我只是喜欢为 HTML、CSS 和 JS 分配不同的角色。我喜欢HTML只处理信息，CSS只处理外观，而JS只处理用户交互。我对模型视图控制器有强迫症。如果我必须改变我的 HTML 来改变外观，那么我的心就会死去。
我不认为想通过 CSS 来做这件事是不合理的——我宁愿把它放在媒体查询后面，让它成为网站布局如何响应而不是拆分的唯一真实来源跨 css 和 js 的逻辑。

标签： html css

【解决方案1】：

这是一个“尽可能简单”的示例，用于更改 div 元素的顺序（在调整浏览器窗口大小时）：

<!DOCTYPE html>
<html>
  <head>
    <title>foobar</title>
    <style>
      @media screen and (max-width:300px){
        #parent{
          display:flex;
          flex-flow: column;
        }
        #a{order:2;}
        #c{order:1;}
        #b{order:3;}
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="a">one</div>
      <div id="b">two</div>
      <div id="c">three</div>
    </div>
  </body>
</html>

示例： http://jsfiddle.net/devnull/qyroxexv/ （改变window-width看看改变div顺序的效果）

【讨论】：

这真的很漂亮……！
如果声明#c { order: -1; }，则不需要覆盖#a和#b的顺序。
简单漂亮
这应该是公认的答案 - 它工作得更好更干净
这是2018年这是最正确的答案。使用 IE8 到木板。

【解决方案2】：

正如已经建议的那样，Flexbox 就是答案 - 特别是因为您只需要 to support 一个现代浏览器：Mobile Safari。

见：http://jsfiddle.net/thirtydot/hLUHL/

如果你愿意，你可以删除 -moz- 前缀的属性，我只是把它们留给未来的读者。

    #blockContainer {
        display: -webkit-box;
        display: -moz-box;
        display: box;
        
        -webkit-box-orient: vertical;
        -moz-box-orient: vertical;
        box-orient: vertical;
    }
    #blockA {
        -webkit-box-ordinal-group: 2;
        -moz-box-ordinal-group: 2;
        box-ordinal-group: 2;
    }
    #blockB {
        -webkit-box-ordinal-group: 3;
        -moz-box-ordinal-group: 3;
        box-ordinal-group: 3;
    }

    <div id="blockContainer">
        <div id="blockA">Block A</div>
        <div id="blockB">Block B</div>
        <div id="blockC">Block C</div>
    </div>

【讨论】：

让我们希望 Windows 7 手机及其该死的 IE 永远不会成为主流，这样我们就可以继续使用这样酷炫的 CSS。
很棒，但在复杂页面上可能会很慢
@thirtydot 太棒了..！我从来不知道这个..非常感谢
flexbox 规范已更改，请参阅此处以获取新实现的示例：developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
对于这个解决方案，您必须希望底层实现使用 ID 或其他机制来唯一标识 blockContainer 中的每个 div。

【解决方案3】：

更新：两个轻量级 CSS 解决方案：

使用flex、flex-flow 和order：

Example1: Demo Fiddle

    body{
        display:flex;
        flex-flow: column;
    }
    #blockA{
        order:4;
    }
    #blockB{
        order:3;
    }
    #blockC{
        order:2;
    }

或者，反转 Y 比例：

Example2: Demo Fiddle

body{
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
div{
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

【讨论】：

omg，example2 太棒了）
第二个例子很有趣。感谢分享！
示例 2 很神奇！
对于示例 2，我不能说“哇”够了！但我认为它不适用于水平项目列表。
这最适用于水平列出的元素，即移动视图

【解决方案4】：

我知道这是旧的，但我找到了一个更简单的解决方案，它适用于 ie10、firefox 和 chrome：

<div id="wrapper">
  <div id="one">One</div>
  <div id="two">Two</div>
  <div id="three">Three</div>
</div>

这是css：

#wrapper {display:table;}
#one {display:table-footer-group;}
#three {display:table-header-group;}

结果：

"Three"
"Two"
"One"

我找到了here。

【讨论】：

在使用表格时非常有帮助！

【解决方案5】：

这种方法在没有 flexbox 的情况下对我有用：

#blockA,
#blockB,
#blockC {
    border: 1px solid black;
    padding: 20px;
}


.reverseOrder,
#blockA,
#blockB,
#blockC {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
}

<div class="reverseOrder">
    <div id="blockA">Block A</div>
    <div id="blockB">Block B</div>
    <div id="blockC">Block C</div>
</div>

【讨论】：

OP 不想颠倒顺序，而是改变顺序：C-A-B，而不是 C-B-A。

【解决方案6】：

HTML：

<div id="blockC second-order">Block C</div>
<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC first-order">Block C</div>

CSS

.second-order {
     display: none;
}

@media only screen and (max-device-width: 480px) {
     .first-order: {
         display: none;
     }

     .second-order: {
         display: block;
     }
}

我认为这是一个不愚蠢的解决方案，因为在大多数情况下重复内容是没有问题的，而在你的情况下，如果是广告，你不会重复很多内容。

虽然一年过去了，但我已经回答了这个问题，因为我正在寻找解决方案，所以我阅读了这个并得到了这个想法。

【讨论】：

有趣的“跳出框框思考”方法。但是，如果重复的内容是自动插入或通过某些包含机制复制的，我只会推荐它。如果这意味着剪切/粘贴一块内容，那将是维护的噩梦。（稍后会有人出现，只在一个地方进行修复，在一个屏幕宽度上测试它，并没有意识到他们没有在所有情况下都修复它。）
我同意，但我认为如果我们使用一些包含机制，应对/粘贴不应该有问题，但没有它我的解决方案不是最好的 - 我知道。

【解决方案7】：

<div id="container">
    <div id="a">Block A</div>
    <div id="b">Block B</div>
    <div id="c">Block C</div>
</div>

假设一个块的高度是 100px

#container     {position:relative; height: 300px;}
#a, #b, #c     {position:absolute; height: 100px}
#c             {top: 0px;}
#b             {top: 100px;}
#a             {top: 200px;}

【讨论】：

我不想硬编码高度。里面的元素是动态的，所以高度是未知的。

【解决方案8】：

我设法用 CSS display: table-* 做到了。不过，我还没有测试超过 3 个块。

fiddle

【讨论】：

很高兴看到不需要 CSS3 flex 的解决方案。不能推广到超过 3 个顶级框——但通常这就足够了。

【解决方案9】：

你可能会弄乱页边距：http://jsfiddle.net/zV2p4/

但您最好使用position: absolute。这不会改变display: block，但它会使宽度自动。要解决此问题，请将 div 设为 width: 100%

【讨论】：

如果我想保留块属性怎么办？也就是说，如果顶部块突然添加了更多文本，底部块将被向下推。使用硬编码的边距，块会发生冲突。
你应该使用 JavaScript。可能有一个 CSS3 属性可以完成此操作。但是，并非所有浏览器都支持 CSS3。

【解决方案10】：

可能在 CSS3 中：http://www.w3.org/TR/css3-writing-modes/#writing-mode

为什么不改变标签的顺序呢？你的 HTML 页面不是用石头做的，是吗？

【讨论】：

布局流程已弃用...改用书写模式
@Will - 谢谢，我看错了资源。

【解决方案11】：

这对于低技术来说如何...

将广告放在顶部和底部，并根据需要使用媒体查询显示：无。

如果广告不太大，下载量不会太大，您甚至可以针对 iPhone/pc 自定义广告向您发送的位置。

【讨论】：

顺便说一句，这就是@kspacja 的答案，它有代码细节。