如何在响应模式中反转元素的顺序

How to reverse the order of elements in responsive mode

本文关键字：元素 顺序 响应 模式      更新时间：2023-09-26

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

我的问题所在的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>

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

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

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

当视口低于600px时，将我的结构从第一个移到第二个的最佳方式是什么？

以下是

的示例

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

此处示例

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

您可以颠倒第二个.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;
    }
}

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

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

.holder{
    float:left;
}

DEMO

使用jquery，您可以反转html的顺序，如下所示：

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