如何在响应模式中颠倒元素的顺序

问题描述

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

I am creating a responsive web page with an infographic content and I encounter this problem:

我的问题是html结构，

The html structure where my problem is,

<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 ）每层交替开始工作正常。

On viewport above 600px, I want my infographic to display horizontally (each card @display: inline-block) with each layer starts alternately which works fine.

问题是，如果视口小于600px，我试图显示信息图垂直（每张卡@display：块）。 （不交替）：

The problem is, if the viewport is less than 600px, I am trying to display the infographic vertically (each card @display: block). with this structure(not alternating):

<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像素？

What would be the best way to shift my structure from the first into the second one when the viewport is below 600px?

推荐答案

您可以颠倒第二个 .holder 元素播放一个显示： table | table-footer-group | table-header-group 。

You may reverse the order of the items of the second .holder element playing a bit with display: table | table-footer-group | table-header-group.

尝试重写您的媒体查询，如下所示：

Try rewriting your media query like so : 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;
    }
}

这篇关于如何在响应模式中颠倒元素的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！