如何使用响应式 CSS 更改 HTML div 的顺序？答案

【问题标题】：How to change HTML divs' order with Responsive CSS?如何使用响应式 CSS 更改 HTML div 的顺序？
【发布时间】：2015-02-17 17:18:54
【问题描述】：

我正在尝试制作一个响应版的“圣杯”CSS layout by Matthew James Taylor

这样移动页面应该呈现如下：

left
content
right

我尝试像this fiddle 一样更改float 规则，但我无法让它发挥作用。尝试将视口大小更改为 600 像素左右。

有没有办法在没有 JavaScript 的情况下做到这一点？

感谢您的帮助！

【问题讨论】：

您是在问如何使用 CSS 更改 DIV 的顺序？

标签： html css layout responsive-design

【解决方案1】：

您可以使 div 相对并更改 margin-top 以使其处于正确的顺序。

【讨论】：

但宽度：100%；他们只是把对方推到谷底。顺序不变。

【解决方案2】：

这很老套，但至少可以让它们按正确的顺序排列。仅当您知道第 1 列的高度时，它才真正起作用。

.holygrail .col1
{
    margin:0;
    position:static;
    width:100%; 
    margin-top: 3ex;
}

.holygrail .col3
{
    left:0;
    width:100%;
    margin:0;
    float:none;
}

.holygrail .col2
{
    width:100%; 
    top:0;
    margin:0;
    right:0;
    position:absolute;
}

（这在媒体查询中。）

【讨论】：

【解决方案3】：

我对此进行了更多调查，发现another Stack Overflow question 的答案对您正在尝试做的事情进行了很好的讨论。（基本上，这不是 CSS 可以可靠地做到的事情。）答案还包括一些比我之前提出的更好的 hack。

【讨论】：

【解决方案4】：

你可以使用方向来实现这个

CSS 中的 direction 属性设置内容流的方向在块级元素中。这适用于文本、内联和内联块元素。它还设置文本的默认对齐方式和表格单元格在表格行内流动的方向。 CSS：

.main-content {
  direction: rtl;  /* Right to Left */
}

有效值为：

ltr - 从左到右，默认 rtl - 从右到左继承 - 从父元素继承其值

来源：http://css-tricks.com/almanac/properties/d/direction/

【讨论】：