如何更改HTML div'；用响应CSS订购？

我正在尝试制作一个“圣杯”的响应版本

因此，移动页面的呈现方式如下所示：

left
content
right

我尝试更改中的

浮动规则，但无法使其正常工作。尝试将视口大小更改为600像素左右

有没有一种不用JavaScript就可以做到这一点的方法

谢谢你的帮助
 您可以将div设置为相对的，并更改边距顶部，使其处于正确的顺序。
这是一种非常粗糙的做法，但至少可以使它们处于正确的顺序。只有当您知道第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;
}

（这在媒体查询中。）
我进一步研究了这个问题，发现答案中有一些关于您尝试做什么的好讨论。（基本上，这不是CSS可以可靠完成的事情。）答案还包括一些比我之前提出的更好的技巧。
您可以使用direction来实现这一点

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

有效值为：

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

来源：
您是否在问如何使用CSS更改div的顺序？但宽度：100%；他们只是互相推倒在地。秩序不变。
.main-content {
  direction: rtl;  /* Right to Left */
}