如何在响应模式下反转元素的顺序答案

【问题标题】：How to reverse the order of elements in responsive mode如何在响应模式下反转元素的顺序
【发布时间】：2014-10-28 22:25:30
【问题描述】：

我正在创建一个包含信息图表内容的响应式网页，但遇到了这个问题：

我的问题所在的html结构，

<div class="holder">
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>
<div class="holder">    
    <div class="three card"></div>    
    <div class="two card"></div>
    <div class="one card"></div>
</div>

在 600 像素以上的视口上，我希望我的信息图水平显示（每张卡片 @display: inline-block），每层交替开始，效果很好。

问题是，如果视口小于 600 像素，我会尝试垂直显示信息图（每张卡片 @display: 块）。采用这种结构（不交替）：

<div class="holder">
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>
<div class="holder">    
    <div class="one card"></div>
    <div class="two card"></div>
    <div class="three card"></div>
</div>

当视口低于 600 像素时，将我的结构从第一个转换到第二个的最佳方法是什么？

Here's an example

【问题讨论】：

纯css??还是 jquery????
@C-linkNepal 最好的方法是什么？
如果你可以使用jquery，那么它很容易转移......
他们有明确的身高吗？

标签： javascript jquery html css responsive-design

【解决方案1】：

作为纯 CSS 解决方案，您可以将 .holder 容器旋转 180 度，然后将框旋转 -180 度以反转顺序：

EXAMPLE HERE

@media (max-width: 600px) {
    .card { display: block; }

    .holder + .holder {
        transform: rotate(180deg);
        direction: rtl; /* Fix the horizontally alignment */
    }

    .holder + .holder .card {
        transform: rotate(-180deg);
        direction: ltr;  /* Fix the horizontally alignment */
    }
}

值得注意的是，IE9+ 支持 CSS 转换。

如果它们都有一个明确的height 并且它们的数量是固定的，这样您就可以通过relative 定位来直观地移动它们。

.card {
    display: block;
    position: relative;
}

.holder + .holder > :first-child {
    top: 200px;
}

.holder + .holder > :last-child {
    top: -200px;
}

【讨论】：

这里是第二种方法的Updated Demo。
这是一个邪恶的解决方案！ :)

【解决方案2】：

您可以颠倒第二个.holder 元素的项目顺序与显示一起播放：table | table-footer-group | table-header-group。

尝试像这样重写您的媒体查询：http://jsfiddle.net/bs5dam2j/

@media (max-width: 400px){

    .holder .card { display: block; }

    .holder + .holder { display: table; }
    .holder + .holder .one { display: table-header-group; } 
    .holder + .holder .three { display: table-footer-group; } 

    /* trick to show .one and .three when they are empty */
    .holder + .holder .card:before {
      display: inline-block;
      content: "";
      height: 100px;
      width: 1px;
    }
}

【讨论】：

谢谢，我想我阅读了更多关于 css 显示表的信息。我正在尝试使用 js/jquery 解决方案，但我发现这更快（性能）。使用 js 我还必须编写一个脚本当视口再次高于 600 像素时恢复结构。

【解决方案3】：

对于 >600px 使用 .card{ float-left; width: (100 / 3)% };
对于 .card{ float: none; display: block; width: 100%; }

【讨论】：

【解决方案4】：

只需将您的 .holder CSS display:inline-block; 更改为：

.holder{
    float:left;
}

DEMO

【讨论】：

【解决方案5】：

使用 jquery，您可以像下面这样颠倒 html 的顺序：

$(window).on('resize',function(){
    if($(window).width()<600){
      var div= $('.holder');
      var divItems = div.children('.card');
      div.append(divItems.get().reverse());
    }
}).resize();

【讨论】：