响应式设计 - 使用 javascript 和 css 更改布局（弹性和媒体查询）

Question

请查看 http://jsfiddle.net/mrcjcfe7/19/ 的工作布局。

我有 3 列（COL1、COL2 和 COL3），我需要根据屏幕宽度重新排列。不同之处在于，当屏幕在 300-600 像素之间时，我需要将 COL3 置于 COL2 之下。 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 旁边的 space 有一个空白。编辑：请查看此 post.

末尾的图片

当屏幕在 300-600px 之间并且第二列包含的内容比第一列更多时，如何实现没有间隙的所需布局？

谢谢，

塞巴斯蒂安

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

Answer 1

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

我现在用flex for the basis layout with a combination of javascript来解决原题。

当space不够用时，第三列在第一列下换行flex-flow：行换行;。
当第一列包含的内容比第二列少时（我原来的问题），我使用 javascript 来 swap 第三列第一列底部的空 div。这样，第三列换行时，第一列下面就没有空隙了。
最后，我使用 media-queries with flex order 将第二列放在第一个位置，当列在另一列之上时。

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

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>

响应式设计 - 使用 javascript 和 css 更改布局（弹性和媒体查询）

Responsive design - Change layout with javascript and css (flex and media-queries)

html

javascript

css

media-queries

flexbox