CSS - 交换列

Question

我的页面上有两列：

Left-Column    Right-Column

在移动设备和平板电脑设备上，我希望右栏显示在左栏之前。例如：

<p>Right-Column</p>
<p>Left-Column</p>

有人如何使用 CSS 做到这一点吗？我知道我可以使用 Bootstrap 来做到这一点，但是 WordPress 模板不是使用 Bootstrap 设计的。

谢谢

Answer 1

如果您不关心浏览器支持，则可以使用flexbox它。

.container {
    display: flex;
}

.container > div {
    width: 50%;
    padding: 0 15px;
}

@media (max-width: 600px){
    .left-col {
        order: 2;
    }

    .right-col {
        order: 1;
    }
}

http://jsfiddle.net/scdvL0Ly/

这应该适用于所有主要浏览器以及 IE10 及更高版本。请参阅CanIuse。

某些浏览器仍然需要前缀才能使用此功能。