流体布局块通过CSS定位，没有任何高度知识的响应布局网站

Question

我在纸上策划了我的网站作为响应式布局网站，并尝试构建非常高级别的布局。

对于（ 320＆gt; = viewport＆gt; = 0 ）部分，它似乎是预期的。

然而，我无法实现我的目标（ 480＆gt; = viewport＆gt; = 321 ）

我所做的链接是：http://jsbin.com/vuliwino/2/edit

1. 我不知道DIV的高度，他们会依赖
2. 我知道DIV宽度的％值。我用CSS代码写的。对于未明确写入的宽度，宽度为100％。
3. 我不希望在HTML中更改DIV的顺序，因为我以这种方式非常容易地实现了（320＆gt; = viewport）CSS的一部分。但是如果存在改变订单但实现两种视口方案的解决方案，那么也欢迎。

我的要求：

注意：下面的数字是Block（缩写为B以下）数字。它们在代码中不言自明。

第1行»B1 - B4 - B5（这些将跨越100％）

第2行»B6（跨度100％）

第3行»B3 - B7（B3比B7短.2 DIVS一起将超过100％）

第4行»B8（跨越B7的100％。）

第5行»B9（跨越B7的100％。）

第6行»B10（跨越B7的100％。）

我希望我需要的是一个带有给定输入的纯CSS解决方案。

你能帮帮我吗？

问候

更新

我添加了一个模型。我为/* 320 >= viewport >= 0 */

实现了scnario 1

我希望为/* 480 >= viewport >= 321 */

实现方案2

块名称是：

1. 1-标志
2. 2-mobile toggle menu
3. 3主菜单
4. 4-secondary menu
5. 5-social media links
6. 6-search box
7. 7-含量
8. 最近发表的评论
9. 来自档案的9个内容
10. 10尺



（ UPDATE 2 ：在样机图片FOR SCENARIO 1中，3-4-5表示顶部3，4表示低于第3，5表示低于第4。正如我所说的那样是我的默认样式，我已经实现了方案1）

（更新3 ：这个问题的第一个答案已到达的那一点。我添加了彩色的jsbin图像。第一行是B1-B3-B4但它应该是B1- B4-B5（参考模型）。块7也应位于B3）

的右侧

Answer 1

http://jsbin.com/vuliwino/9/edit

试试这个。

您必须使用javascript来物理移动主菜单。

$(window).resize(resize);
resize();

function resize()
{
    console.log($(window).width());
    if($(window).width() <= 480 && $(window).width() >= 321)
    {
        $("#id3").insertAfter("#id6");
    }
    else
    {
        $("#id3").insertBefore("#id4");
    }
}

使用内联块来制作柱子。

这就是它的样子：