如何在响应模式下颠倒元素的顺序 [英] How to reverse the order of elements in responsive mode

问题描述

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

我的问题所在的 html 结构，

<div class="一张卡片"></div><div class="两张卡片"></div><div class="三张卡片"></div>
<div class="holder"><div class="三张卡片"></div><div class="两张卡片"></div><div class="一张卡片"></div>

在 600 像素以上的视口上，我希望我的信息图表水平显示(每张卡片 @display: inline-block)，每一层交替开始，这很好用.

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

<div class="一张卡片"></div><div class="两张卡片"></div><div class="三张卡片"></div>
<div class="holder"><div class="一张卡片"></div><div class="两张卡片"></div><div class="三张卡片"></div>

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

这是一个例子

解决方案

您可以颠倒第二个 .holder 元素的项目顺序，显示:table |table-footer-group |表头组.

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

@media(最大宽度:400px){.holder .card { 显示:块；}.holder + .holder { 显示:表格；}.holder + .holder .one { display: table-header-group;}.holder + .holder .three { display: table-footer-group;}/* 当 .one 和 .three 为空时显示它们的技巧 */.holder + .holder .card:before {显示:内联块；内容: "";高度:100px；宽度:1px；}}

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

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>

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

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>

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

Here's an example

解决方案

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

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