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 .

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