Question

在wordpress中，我有一行默认的库，例如：
| A | B | C |
如何在小屏幕上显示如下：
| B |
| A |
| C |
我对响应式设计没有任何问题。我无法想象如何重新排序不同屏幕尺寸的列。我需要一些相当于bootstrap pull / push的东西。

Answer 1

也许最简单的方法是按照您的愿望顺序创建两组元素。

将您的集合A命名为| A | B | C |和B是 | B | | A | | C |

A将以较大的屏幕尺寸显示，B将以较小的显示。

这样的事情：一套：

<div class='container A-Set'>
   <div class='A' style='float : right'>
     A
   </div>
   <div class='B' style='float : right'>
     B
   </div>
   <div class='C' style='float : right'>
     C
   </div>
   <div style='clear : both'></div>
</div>

B集：

<div class='container B-Set'>
   <div class='B'>
     B
   </div>
   <div class='A'>
     A
   </div>
   <div class='C'>
     C
   </div>
</div>

样式表：

@media screen and (min-width: 480px) {
    container.B-Set {
        display : none
    }
}

@media screen and (max-width: 480px) {
    container.A-Set {
        display : none
    }
}

如何针对不同的屏幕尺寸重新排序wordpress中的列

1 个答案: