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

请看一看工作布局

我有3列（COL1、COL2和COL3），我需要根据屏幕宽度重新排列。问题是，当屏幕在300-600px之间时，我需要将COL3置于COL2之下。在300px下，我需要显示COL2，COL3和COL1

当调整屏幕大小时，CSS和Javascript的组合将完成此任务

var col1=document.getElementById（'col1'），
col2=document.getElementById（'col2'），
交换=假；
window.onresize=函数（）{
变量宽度=window.innerWidth；
if（宽度<300&&swaped==false）{
swapCols（）；
交换=真；
}否则如果（宽度>300&&swapped==真）{
swapCols（）；
交换=假；
}
};
函数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*{
保证金：0；
填充：0；
}
身体{
背景：#000；
字体系列：helvetica，verdana；
}
#包装纸{
宽度：600px；
}
#可乐{
浮动：左；
宽度：200px；
背景：#cc4444；
}
#可乐{
浮动：左；
宽度：200px；
背景：#44cc44；
}
#可乐{
浮动：左；
宽度：200px；
背景：#4444cc；
}
.清楚{
明确：两者皆有；
}
@仅介质屏幕和（最小宽度：300px）和（最大宽度：600px）{
#可乐{
浮动：无；
}
}
@仅介质屏幕和（最大宽度：300px）{
#包装纸{
宽度：100%；
}
#col1，#col2，#col3{
浮动：无；
宽度：100%；
}
}

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

我现在用为基础的布局与原来的问题相结合来解决

当空间不足时，第三列将在第一列下换行：行换行

当第一列包含的内容少于第二列（我的原始问题）时，我使用在第一列底部用空div交换第三列。这样，当第三个柱缠绕时，第一个柱下没有间隙

最后，我使用withorder将第二列放置在第一个位置，当一列位于另一列之上时

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


var col1=document.getElementById（'sc1'），
col2=document.getElementById（'c3'），
交换=假；
window.onresize=函数（）{
detectSwap（）；
};
window.onload=函数（）{
detectSwap（）；
};
函数detectSwap（）{
变量宽度=window.innerWidth；
if（宽度599&&swaped==真）{
swapCols（）；
交换=假；
}
}
函数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*{
保证金：0；
填充：0；
}
.柔性容器{
显示器：flex；
柔性流：行换行；
}
科尔斯先生{
宽度：200px；
}
#c1{
背景：#cc4444；
}
#c2{
背景：#44cc44；
}
#c3{
背景：#4444cc；
}
@仅介质屏幕和（最大宽度：400px）{
#c1{
顺序：2；
}
#c2{
顺序：-1；
}
#c3{
顺序：3；
}
}

列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-列1-
第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列第2列-第2列-第2列-第2列-第2列-第2列-第2列-第2列-第2列-
第3列-第3列-第3列-第3列-第3列-第3列-第3列-第3列-第3列-第3列-第3列-第3列-第3列-第3列-第3列-第3列-第3列-第3列-第3列
所以我有点困惑……您有3列（COL1 COL2 COL3）。当屏幕处于300px-600px之间时，是否希望COL3低于COL2？当屏幕低于300px时，按顺序显示列，那么COL1，然后COL2在下面？使用COL2下的COL3？使用
order
属性尝试flex。没错，正如@mwl所说的Try
flex
layout：我尝试了flex，得到了相对相同的结果（）当屏幕在400到600px之间时，行会自动换行（COL2旁边的COL1和“新”行上的COL3）。我需要COL3的内容正好在COL1的内容下面。似乎要填补COL1和COL3之间的空白需要合并两列