Question

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

我的问题所在的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-block），每一层交替启动，工作正常。

问题是，如果视口小于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时，将结构从第一个移到第二个的最佳方法是什么？

Here's an example

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

Answer 2

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

Answer 3

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

.holder{
    float:left;
}

<强> DEMO

Answer 4

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

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

Answer 5

您可以通过显示来反转第二个.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;
    }
}

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

5 个答案: