如何使用css在屏幕尺寸减小时重新定位div？

我一直试图建立一个网站有3列布局。所有车身都有一个余量：0 auto以保持其在中心位置，最小宽度为1218px

现在，我要做的是重新定位右柱，使其位于左柱下方，而不影响中柱。一个活生生的例子是推特主页，在左边我可以看到我的个人资料和趋势，中间的一栏显示推特，右边的一栏显示1366x768屏幕上的建议，现在如果我将屏幕大小更改为1024x768，右边的建议一栏会下降到左边一栏的下方，但中心时间线不受影响

定义将是：

<div class="containter" style="margin:0px auto;">
    <div class="left-col" style="width:290px; float:left;">Left Stuff goes here </div>
    <div class="center-col" style="width:590px; float:right;"> Center body </div>
    <div class="right-col" style="width:290px; float:right;">right Stuff goes here </div>
</div>

左边的东西放在这里
中心体
正确的东西在这里

现在请注意，中心列有一个右浮动，是从twitter复制的

我不能使用媒体查询，因为该网站将处理许多旧浏览器，而且如果可能的话，我希望避免使用JavaScript。 有什么帮助吗？

主容器的“最小宽度”不能这样做。您必须使用“最大宽度”，因为您希望确保屏幕宽度变得更窄时发生一些事情。主柱（在中间）必须左浮动，而不是右浮动。这里有一个可能的解决方案。然而，我觉得所有的问题都很奇怪，因为你想在一个不支持响应CSS的旧浏览器中创建一个响应性布局

<style>
    .container {
        max-width: 1218px;
    }

    .leftColumn {
        float: left;
        width: 300px;
        height: 500px;
        background-color: brown;
    }

    .mainColumn {
        float: left;
        width: 700px;
        height: 500px;
        background-color: darkgreen;
    }

    .suggestions {
        float: left;
        width: 218px;
        height: 500px;
        background-color: darkorange;
    }

    .cleaner {
        clear: both;
    }
</style>


<div class="container">
    <div class="leftColumn">
        LEFT
    </div>

    <div class="mainColumn">
        MAIN
    </div>

    <div class="suggestions">
        SUGGESTIONS
    </div>

    <div class="cleaner"></div>
</div>

.集装箱{
最大宽度：1218px；
}
.leftColumn{
浮动：左；
宽度：300px；
高度：500px；
背景颜色：棕色；
}
.main列{
浮动：左；
宽度：700px；
高度：500px；
背景色：暗绿色；
}
.建议{
浮动：左；
宽度：218px；
高度：500px；
背景色：达克朗格；
}
.清洁工{
明确：两者皆有；
}
左边
主要
建议

旧浏览器。。。多少岁？IE6？@Marcos Pérez Gude我试过上面的代码，但没有用。是在问如何做一些离题的事情吗？@fcalderan年纪大了，不支持媒体查询。@coderudetwodee当我评论说代码没有显示时。我使用的是手机上的SO，因此代码由于某种原因无法正常工作，我不得不再次编辑它，也许这就是原因。干杯如果没有指定主柱的高度，这就不起作用，因为我的主柱可能很长，如果主柱没有结束，右柱就不会开始@一月P。