Html 如何使用1,2,3行的网格创建响应

在下面的代码中，响应网格从一行变成三行，如果屏幕很大，我想从一行变成两行，然后再变成三行。最好的方法是什么？在纯Css中，而不是使用引导。提前感谢您的帮助

/*节*/
.科{
明确：两者皆有；
填充：0；
保证金：0；
}
/*列设置*/
上校{
显示：块；
浮动：左；
利润率：1%01%1.6%；
}
.col:第一个子项{左边距：0}
/*分组*/
.小组：之前，
.小组：之后{
内容：“；
显示：表格；
}
.小组：之后{
明确：两者皆有；
}
.组{
缩放：1；/*适用于IE 6/7*/
}
/*三格*/
.span_3_of_3{
宽度：100%；
}
.span_2_/u 3{
宽度：66.1%；
}
.span_1_/u 3{
宽度：32.2%；
}
/*以小于480像素的全宽显示*/
@仅介质屏幕和（最大宽度：300px）{
.col{margin:1%01%0%}
.span_3_of_3、.span_2_of_3、.span_1_of_3{宽度：100%}
}

这是第1栏
这是第二栏
这是第三栏

此代码段使用了您开始使用的float方法，并对其进行了一些清理。Flexbox和inline block是实现响应列的其他方法，但没有最好的方法；这要视情况而定

列上不需要编号的类。填充百分比和边距可能很棘手，所以我使用了5px。在容器上设置负边距意味着您不需要删除第一列或最后一列的边距

一个大问题是容器中的空白，所以我将字体大小设置为0

.科{
明确：两者皆有；
填充：0px；
保证金：-5px；
字号：0；
}
上校{
字体大小：16px；
浮动：左；
保证金：5px；
宽度：钙（33.33%-10px）；
}
.组{
宽度：100%；
}
.小组：之后{
明确：两者皆有；
}
.组{
缩放：1；
/*对于IE 6/7*/
}
@仅介质屏幕和（最大宽度：500px）{
上校{
宽度：计算（50%-10px）；
}
}
@仅介质屏幕和（最大宽度：300px）{
上校{
宽度：100%；
}
}
这是第1栏
这是第二栏
这是第三栏

您可以使用Flexbox进行操作：

body{margin:0}
.组{
显示：flex；/*以内联方式显示flex项（子项）*/
柔性包裹：包裹；/*启用其包裹*/
}
.col{flex:1}/*每个33.33%的父级宽度（3列），直到在768px处中断*/
.第一{背景：红色}
.second{背景：绿色}
.third{背景：蓝色}
@介质（最大宽度：768px）{
.col{flex:0 1 50%}/*每50%的父级宽度（2列）*/
}
/*如果您想让第三列占据剩余的空间，只需将第一个数字更改为1，即可实现flex项的增长/扩展*/
@介质（最大宽度：320px）{
.col{flex basis:100%}/*每100%的父级宽度（1列）*/
}
/*flex属性是flex grow、flex shrink和flex basis的缩写。第二个和第三个参数（弹性收缩和弹性基础）是可选的。默认值：“flex:0 1自动”*/

这是第1栏
这是第二栏
这是第三栏