html - 使用 CSS 切换 block 元素的顺序

<分区>

短篇小说

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

现在我想切换 block 的顺序。我怎样才能只使用 CSS 来做到这一点？

------------
| Block C  |
------------
| Block A  |
------------
| Block B  |
------------

我知道有诸如使用 position:absolute 之类的 hacky 解决方案，但这并不能保留 display:block 属性的有效使用。也就是说， block 在变大时会将其他 block 向下推。

说来话长

当用户使用计算机查看我的网页时， block 按以下顺序显示:

一般信息。
事件日程。
iPhone 应用广告

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

如果移动用户访问此站点，iPhone 应用程序广告应该是页面上最重要的内容。因此，它应该移到顶部:

iPhone 应用广告
一般信息。
事件日程。

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

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

最佳答案

这是一个“尽可能简单”的示例，用于更改 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顺序的效果)

关于html - 使用 CSS 切换 block 元素的顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7425665/

上一篇：html - 单独使用css画圆

下一篇：html - 使用普通链接提交表单

相关文章：

php - 如何更改主导航栏的颜色，我无法通过 CSS 或 PHP 访问它

javascript - 将 HTML 表单输入设置为 JS 变量

javascript - Escape键功能代替按钮onclick

javascript - 在两列页面上，如何使用 CSS 或 Javascript 将左侧 div 增加到与右侧 div 相同的高度？

html - 如何使 iframe 安全？

javascript - 如何在 Bootstrap 模式中显示输入字段的信息？

带有链接的 HTML5 TAG ADDRESS mailto

javascript - 在下拉项的 anchor 标记中使用输入类型文件

css - 将我的标签放在图表前面而不遮挡点

javascript - 带有嵌套项的 Accordion 控件