Html 如何在较小的屏幕上重新定位某些块？
我有一个看起来非常常见的html和css布局：一个大的内容行和侧边栏。 看看这里。块1、2、3进入主体部分，块4、5、6进入侧栏。现在我想做的是在更小的屏幕上重新定位这些块，比如说在平板电脑上 所以我只是在犹豫如何把蓝色方块放在4和5的底部。 到目前为止，我试图使用flex创建它，但它似乎太难了，因为结构不允许这样做Html 如何在较小的屏幕上重新定位某些块？,html,css,Html,Css,我有一个看起来非常常见的html和css布局：一个大的内容行和侧边栏。 看看这里。块1、2、3进入主体部分，块4、5、6进入侧栏。现在我想做的是在更小的屏幕上重新定位这些块，比如说在平板电脑上 所以我只是在犹豫如何把蓝色方块放在4和5的底部。 到目前为止，我试图使用flex创建它，但它似乎太难了，因为结构不允许这样做 #包装器{ 显示器：flex； 宽度：100%； /*高度：320px*/ 边框：1px纯黑； } #可乐{ 弹性基准：80%； } #可乐{ 弹性基准：20%； 职位：相
#包装器{
显示器：flex；
宽度：100%；
/*高度：320px*/
边框：1px纯黑；
}
#可乐{
弹性基准：80%；
}
#可乐{
弹性基准：20%；
职位：相对
}
#另一个包装{
位置：绝对位置；
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：立柱；
}
#假发1{
背景色：红色；
高度：80px
}
#假发2{
背景颜色：绿色；
高度：150像素
}
#假发3{
背景颜色：蓝色；
高度：40px
}
#假发4{
背景颜色：黄色；
高度：100px
}
#假发5{
背景颜色：紫色；
高度：100px
}
#假发6{
背景色：洋红色；
显示器：flex；
弯曲方向：立柱；
溢出：自动；
弹性：1；
}
1.
2.
3.
4.
5.
6.
6.
6.
6.
6.
6.
6.
6.
6.
6.
6.
6.
.grid{
显示：网格；
网格模板柱：3fr 1fr；
网格模板区域：“一二”“三四”“五六”；
}
.grid>div{
边框：实心2倍绿色；
}
.grid>div:n个子项（1）{
背景颜色：浅蓝色；
网格面积：1；
}
.grid>div:n个子项（2）{
背景颜色：黄色；
网格面积：2个；
}
.grid>div:n个子项（3）{
背景颜色：浅绿色；
网格面积：3个；
}
.grid>div:n个子项（4）{
背景颜色：卡其色；
网格面积：4个；
}
.grid>div:n个子项（5）{
背景色：青色；
网格面积：5个；
}
.grid>div:n个子项（6）{
背景颜色：棕色；
网格面积：6个；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.电网{
网格模板区域：“一个一”“两个二”“四个六”“五个六”“三个六”；
网格模板柱：1fr 3fr；
}
}
1.
2.
3.
4.
5.
6.
<style>
* {
box-sizing: border-box;
}
#wrapper {
border: 1px solid black;
}
@media screen and (min-width: 900px){
#col2 {
width: 20%;
float: left;
}
#col1 {
width: 80%;
float: left;
}
}
@media screen and (max-width: 900px){
#another {
width: 40%;
float: left;
}
#wig3 {
position: absolute;
width: 39%;
top: 439px;
}
}
#wig1 {
background-color: red;
height: 80px
}
#wig2 {
background-color: green;
height: 150px
}
#wig3 {
background-color: blue;
height: 40px
}
#wig4 {
background-color: yellow;
height: 100px
}
#wig5 {
background-color: purple;
height: 100px
}
#wig6 {
background-color: magenta;
display: flex;
flex-direction: column;
}
</style>
<div id="wrapper">
<div id="col1">
<div id="wig1">1</div>
<div id="wig2">2</div>
<div id="wig3">3</div>
</div>
<div id="col2">
<div id="another">
<div id="wig4">4</div>
<div id="wig5">5</div>
</div>
<div id="wig6">
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
<span>6</span>
</div>
</div>
</div>
* {
框大小：边框框；
}
#包装纸{
边框：1px纯黑；
}
@媒体屏幕和屏幕（最小宽度：900px）{
#可乐{
宽度：20%；
浮动：左；
}
#可乐{
宽度：80%；
浮动：左；
}
}
@媒体屏幕和屏幕（最大宽度：900px）{
#另一个{
宽度：40%；
浮动：左；
}
#假发3{
位置：绝对位置；
宽度：39%；
顶部：439px；
}
}
#假发1{
背景色：红色；
高度：80px
}
#假发2{
背景颜色：绿色；
高度：150像素
}
#假发3{
背景颜色：蓝色；
高度：40px
}
#假发4{
背景颜色：黄色；
高度：100px
}
#假发5{
背景颜色：紫色；
高度：100px
}
#假发6{
背景色：洋红色；
显示器：flex；
弯曲方向：立柱；
}
1.
2.
3.
4.
5.
6.
6.
6.
6.
6.
6.
6.
6.
6.
6.
6.
6.