Html 当元素出现在不同的父元素中时，我们可以重新排序它们吗？

我有一个简单的部分，我想在mobile中对元素进行重新排序

在桌面中，它看起来像这样：

我希望它在移动设备中看起来像这样：

到目前为止，我已经尝试了以下内容：JSFiddle

@仅媒体屏幕和（最大宽度：480px）{
.flex-item1{
顺序：1；
}
.flex-item2{
顺序：3；
}
.flex-item 3{
顺序：2；
}
}

---

在col-xs-12中用于移动版本

<section id="main-content">
           `enter code here`<div class="container">
                <div class="row" id="top-content">
                    <div class="col-md-4 col-xs-12" id="left-content">
                        <div class="row col-md-12>
                             <h1 class="flex-item1"></h1>
                        </div>
                        <div class="row col-md-12>
                             <h1 class="flex-item2"></h1>
                        </div>
                    </div>
                    <div class="col-md-8 col-xs-12" id="right-content">
                            <div class="flex-item3" canplay id="video-block">
                            </div>
                    </div>
                </div>
        </div>

</section>  

---

我用

table

标签代替了

flexbox

看看是否适合你

.flex-item1{
背景：天蓝色；
宽度；
150px；
高度：100px；
}
.flex-item2{
宽度：150px；
高度：100px；
背景：绿色
}
.flex-item 3{
宽度：300px；
高度：400px；
背景：红色；
}
@仅介质屏幕和（最大宽度：600px）{
桌子{
宽度：100%；
}
.flex-item1，
.flex-item2，
.flex-item 3{
显示：块；
宽度：100%；
}
}

1.
3.
2.

您可以使用CSS网格。我在这里和一个朋友玩。请使用全屏模式查看输出

注意：如果有人可以减少这段代码，请减少，因为我刚刚进入CSS网格

.container{
显示：网格；
网格模板柱：1fr 1fr 1fr 1fr；
网格模板行：1fr 1fr 1fr 1fr；
栅柱间隙：10px；
网格行间距：10px；
高度：500px；
}
.1分部{
网格面积：1/1/3/3；
背景：#00A2E8；
}
.第2分部{
网格面积：3/1/5/3；
背景：#22b14c；
}
.第3分部{
网格面积：1/3/5/5；
背景：#ED1C24；
}
@介质（最大宽度：600px）{
.1分部{
网格面积：1/1/2/5；
}
.第2分部{
网格面积：4/1/5/5；
}
.第3分部{
网格面积：2/1/4/5；
}
}
/*附加样式*/
.container>div{
颜色：#fff；
字号：2em；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

1.
2.
3.

order属性检查父级是否具有flexbox型号。但是在您的情况下，flexbox被设置为row类，并且您尝试的顺序不是直接子对象。您的结构不允许这样做。一个div的子级不能优先于另一个div的子级。这破坏了

div

标记的整个定义。@Hussaintezabwala那么我需要做什么才能得到我想要的呢？？？@ManojKumar嗨，那么我需要在我的代码中更改什么才能得到我想要的呢？你使用的是bootstrap吗？我的兄弟，我要检查一下，BRB好的解决方案如果你想使用表格，我更喜欢flexbox的网格或引导解决方案，因为我有很多数据将被添加到这些列中，不过感谢你的帮助，我对快速简单的解决方案投了赞成票。当我自己选择表格而不是flexbox时，我很惊讶，因为它是老派的。但Manoj共享的基于网格的解决方案绝对正确。这是正确的做法。我自己对他的答案投了赞成票；）没错，我花了3个小时想弄清楚到底发生了什么：（很好的解决方案，与跨浏览器的兼容性如何？请检查：是的，兄弟，我现在正在检查，看起来不错，感谢网格生成器，哇，太棒了，我将用真实数据测试你的解决方案，我将回来接受你的回答Manoj正在与网格系统抗争，这是我的真实数据实时演示，你能帮我吗你用密码来得到这个？

@media only screen and (max-width: 480px) {
.flex-item1 {
    order: 1; 
   }
.flex-item2{
    order: 3;
}
.flex-item3{ 
  order: 2; 
}
}