响应式设计 - 使用 javascript 和 css 更改布局（flex 和 media-queries）

Question

请查看http://jsfiddle.net/mrcjcfe7/19/ 以获得有效的布局。

我有 3 列（COL1、COL2 和 COL3）我需要根据屏幕宽度重新排列。扭曲是当屏幕在 300-600 像素之间时，我需要在 COL2 下获得 COL3。 300px以下，需要显示COL2、COL3和COL1。

当调整屏幕大小时，CSS 和 Javascript 的组合就完成了。

var col1 = document.getElementById('col1'),
    col2 = document.getElementById('col2'),
    swapped = false;

window.onresize = function () {
    var width = window.innerWidth;
    if (width < 300 && swapped === false) {
        swapCols();
        swapped = true;
    } else if (width > 300 && swapped === true) {
        swapCols();
        swapped = false;
    }
};

function swapCols() {
    var _col1 = col1.innerHTML,
        _col1id = col1.id,
        _col2 = col2.innerHTML,
        _col2id = col2.id;
    col1.innerHTML = _col2;
    col1.id = _col2id;
    col2.innerHTML = _col1;
    col2.id = _col1id;
}

html * {
    margin:0;
    padding:0;
}
body {
    background:#000;
    font-family:helvetica, verdana;
}
#wrapper {
    width:600px;
}
#col1 {
    float:left;
    width:200px;
    background:#cc4444;
}
#col2 {
    float:left;
    width:200px;
    background:#44cc44;
}
#col3 {
    float:left;
    width:200px;
    background:#4444cc;
}
.clear {
    clear:both;
}
@media only screen and (min-width:300px) and (max-width:600px) {
    #col3 {
        float:none;
    }
}
@media only screen and (max-width:300px) {
    #wrapper {
        width:100%;
    }
    #col1, #col2, #col3 {
        float:none;
        width:100%;
    }
}

<div id="wrapper">
    <div id="col1" class="cols">COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 -</div>
    <div id="col2" class="cols">COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 -</div>
    <div id="col3" class="cols">COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 -</div>
    <div class="clear"></div>
</div>

我遇到的问题是当 COL2 包含比 COL1 更多的东西时。 COL3 占据了我想要的位置，但在 COL2 旁边的空间中有一个空隙。编辑：请看这篇文章末尾的图片。

当屏幕在 300-600 像素之间且第二列包含的内容比第一列多时，我如何才能在没有间隙的情况下实现所需的布局？

谢谢，

塞巴斯蒂安

编辑 Here is an image showing the correct layout and the problem I attempt to solve

Answer 1

感谢大家的帮助。我终于找到了适合这 3 列响应式布局的东西。

我现在使用flex 与javascript 组合来解决原始问题。

1. 当空间不足时，第三列用flex-flow在第一列下面换行：row wrap;。

2. 当第一列包含的内容少于第二列（我的原始问题）时，我使用javascript 交换第三列，第一列底部有一个空 div柱子。这样一来，当第三列换行时，第一列下方就没有间隙了。

3. 最后，我使用media-queries 和flex order 将第二列放在第一列，当两列相互重叠时。

这是一个工作示例。 运行代码 sn-p 时请注意：您必须缩小浏览器的宽度才能看到列的调整。

var col1 = document.getElementById('sc1'),
    col2 = document.getElementById('c3'),
    swapped = false;

window.onresize = function () {
    detectSwap();
};

window.onload = function () {
    detectSwap();
};

function detectSwap() {
    var width = window.innerWidth;
    if (width <= 599 && swapped === false) {
        swapCols();
        swapped = true;
    } else if (width > 599 && swapped === true) {
        swapCols();
        swapped = false;
    }
}

function swapCols() {
    var _col1 = col1.innerHTML,
        _col1id = col1.id,
        _col2 = col2.innerHTML,
        _col2id = col2.id;
    col1.innerHTML = _col2;
    col1.id = _col2id;
    col2.innerHTML = _col1;
    col2.id = _col1id;
}

html * {
    margin:0;
    padding:0;
}
.flex-container {
    display: flex;
    flex-flow: row wrap;
}
.cols {
    width: 200px;
}
#c1 {
    background:#cc4444;
}
#c2 {
    background:#44cc44;
}
#c3 {
    background:#4444cc;
}
@media only screen and (max-width:400px) {
    #c1 {
        order: 2;
    }
    #c2 {
        order: -1;
    }
    #c3 {
        order: 3;
    }
}

<div class="flex-container">
    <div id="c1" class="cols">COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 - COL 1 -
        <div id="sc1"></div>
    </div>
    <div id="c2" class="cols">COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 - COL 2 -</div>
    <div id="c3" class="cols">COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 - COL 3 -COL 3 - COL 3 - COL 3</div>
</div>