短篇小说

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

我知道有一些hacky解决方案，例如使用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

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

请参阅： http://jsfiddle.net/thirtydot/hLUHL/

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

<强> CSS：

#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;
}

<强> HTML：

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

Answer 2

这是一个“尽可能简单”的示例，用于更改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/ （更改窗口宽度以查看更改div顺序的效果）

Answer 3

我知道这是旧的，但我找到了一个更简单的解决方案，它适用于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。

Answer 4

更新：两个轻量级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);
}

Answer 5

这种方法适用于我而没有flexbox：

＆＃13;

#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);
}

＆＃13;

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

＆＃13;

Answer 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;
     }
}

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

我对这个问题的答案已经过了一年，因为我正在寻找解决方案，我读到这个并得到了这个想法。

Answer 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;}

Answer 8

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

但是使用position: absolute可能会更好。这不会改变display: block，但会使宽度自动。要解决此问题，请设置div width: 100%

Answer 9

我设法用CSS display: table-*做到了。虽然我还没有超过3个街区进行过测试。

fiddle

Answer 10

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

为什么不更改标签的订单？您的HTML页面不是一成不变的，是吗？

Answer 11

这样做是为了低技术......

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

如果广告不是太大，下载的尺寸不会太大，您甚至可以自定义广告发送给iPhone / PC的位置。

使用CSS切换块元素的顺序

短篇小说

长篇故事

11 个答案:

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

Example1: Demo Fiddle

Example2: Demo Fiddle