当元素出现在不同的父母中时,我们可以重新排序吗? [英] Can we reorder elements when they are present inside different parents?
本文介绍了当元素出现在不同的父母中时,我们可以重新排序吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个简单的部分,我想为其重新排列移动设备中的元素.
I have a simple section for which I want to re-order the elements in mobile.
在桌面上,它看起来像这样:
In desktop, it looks like this:
我希望它在移动设备中看起来像这样:
I want it to look like this in mobile:
这是我到目前为止尝试过的:JSFiddle 实时演示
Here is what i have tried so far : JSFiddle live demo
@media only screen and (max-width: 480px) {
.flex-item1 {
order: 1;
}
.flex-item2 {
order: 3;
}
.flex-item3 {
order: 2;
}
}
<section id="main-content">
<div class="container">
<div class="row" id="top-content">
<div class="col-lg-4" id="left-content">
<h1 class="flex-item1"></h1>
<div class="card-custom flex-item2">
</div>
</div>
<div class="col-lg-8" id="right-content">
<div class="flex-item3" canplay id="video-block">
</div>
</div>
</div>
</div>
</section>
我在做什么错了?
推荐答案
您可以使用CSS Grid.我在这里玩了网格生成器.请使用全屏模式查看输出.
You can make use of CSS Grid. I played around with a Grid Generator here. Please use full screen mode to view the output.
注意:如果有人可以减少此代码,请这样做,因为我刚刚进入CSS Grid.
Note: If anyone can reduce this code, please do since I just dived into CSS Grid.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
height: 500px;
}
.div1 {
grid-area: 1 / 1 / 3 / 3;
background: #00A2E8;
}
.div2 {
grid-area: 3 / 1 / 5 / 3;
background: #22b14c;
}
.div3 {
grid-area: 1 / 3 / 5 / 5;
background: #ED1C24;
}
@media ( max-width: 600px) {
.div1 {
grid-area: 1 / 1 / 2 / 5;
}
.div2 {
grid-area: 4 / 1 / 5 / 5;
}
.div3 {
grid-area: 2 / 1 / 4 / 5;
}
}
/* Additional styles */
.container>div {
color: #fff;
font-size: 2em;
display: flex;
justify-content: center;
align-items: center;
}
<div class="container">
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
这篇关于当元素出现在不同的父母中时,我们可以重新排序吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文