当元素存在于不同的父元素中时，我们可以重新排序元素吗? [英] Can we reorder elements when they are present inside different parents?

查看：8
本文介绍了当元素存在于不同的父元素中时，我们可以重新排序元素吗?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个简单的部分，我想为移动设备中的元素重新排序.

在桌面上，它看起来像这样:

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

这是我迄今为止尝试过的:JSFiddle 现场演示

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

<div class="容器"><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 class="col-lg-8" id="right-content"><div class="flex-item3" canplay id="video-block">

</section>

我做错了什么?

解决方案

您可以使用 CSS 网格.我在这里玩了一个 网格生成器.请使用全屏模式查看输出.

注意:如果有人可以减少此代码，请这样做，因为我刚刚深入研究了 CSS 网格.

JSfiddle 演示

.container {显示:网格；网格模板列:1fr 1fr 1fr 1fr；网格模板行:1fr 1fr 1fr 1fr；网格列间距:10px；网格行距:10px；高度:500px；}.div1 {网格区域:1/1/3/3；背景:#00A2E8；}.div2 {网格区域:3/1/5/3；背景:#22b14c；}.div3 {网格区域:1/3/5/5；背景:#ED1C24；}@media(最大宽度:600px){.div1 {网格区域:1/1/2/5；}.div2 {网格区域:4/1/5/5；}.div3 {网格区域:2/1/4/5；}}/* 其他样式 */.container>div {颜色:#fff;字体大小:2em；显示:弹性；对齐内容:居中；对齐项目:居中；}

<div class="div1">1</div><div class="div2">2</div><div class="div3">3</div>

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:

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>

What am I doing wrong?

解决方案

You can make use of CSS Grid. I played around with a Grid Generator here. Please use full screen mode to view the output.

Note: If anyone can reduce this code, please do since I just dived into CSS Grid.

JSfiddle Demo

.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屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆