CSS - 交换列答案

【问题标题】：CSS - Swap ColumnsCSS - 交换列
【发布时间】：2019-12-08 19:46:52
【问题描述】：

我的页面上有两列：

Left-Column    Right-Column

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

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

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

谢谢

【问题讨论】：

我们应该如何在没有看到相关代码的情况下为您提供有效的答案？ stackoverflow.com/help/how-to-ask

标签： css wordpress

【解决方案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。

某些浏览器仍需要此功能的前缀。

【讨论】：

【解决方案2】：

我会使用 flex-box 和媒体查询：

#parent {
  display: flex;
  flex-wrap:wrap
}
#parent > div {
  flex: 1 1 40%;
}
@media only screen and (max-device-width: 500px) {
  #parent > div {
      flex: 1 1 100%;
  }
  #left {
    order: 2;
  }
  #right {
    order: 1;
  }
}

<div id="parent">
  <div id="left">
    <span>Left</span>
  </div>

  <div id="right">
    <span>Right</span>
  </div>
</div>

【讨论】：

【解决方案3】：

你的问题不是很清楚。

但根据目前的知识，请保留float:right 用于左列和 float:left 代表右列。

查看演示：

http://jsfiddle.net/srmpx6Lp/2/

如果你给出你的代码，我可以更好地理解需求

【讨论】：

这确实颠倒了顺序。但 OP 也希望它们堆叠在移动设备上。

【解决方案4】：

不是很困难，只是在媒体查询中与其他元素的宽度相反：

.left {
    width: 75%;
    background: red;
}

.right {
    width: 25%;
    background: blue;
}

@media (max-width: 992px) {
    .left {
        left: 25%;
    }

    .right {
        right: 75%;
    }
}

Example

【讨论】：

此代码无法按预期工作。在较小的视口上，红色块应放置在蓝色块上方。
真的吗？ “在移动设备和平板设备上，我希望右列显示在左列之前”
列必须交换，但也应按 OP 的要求堆叠
@Fabrizio Calderan 如果 OP 对任何事情发表评论，您的答案可能是正确的 :)

【解决方案5】：

如果是<table>，您还可以将direction: rtl 用于父元素，将direction: ltr 用于子元素。

【讨论】：