当元素存在于不同的父元素中时，我们可以重新排序元素吗？ [复制]

Question

我有一个简单的部分，我想在移动设备中对其元素重新排序。

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

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

这是我迄今为止尝试过的：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>

我做错了什么？

Answer 1

在 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>  

css代码：

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

Answer 2

我用table标签代替flexbox

看看它是否适合你。

.flex-item1 {
  background: skyblue;
  width;
  150px;
  height: 100px;
}

.flex-item2 {
  width: 150px;
  height: 100px;
  background: green
}

.flex-item3 {
  width: 300px;
  height: 400px;
  background: red;
}

@media only screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  .flex-item1,
  .flex-item2,
  .flex-item3 {
    display: block;
    width: 100%;
  }
}

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<section id="main-content">
  <div class="container">
    <div class="row" id="top-content">
      <table>
        <tr>
          <th class="flex-item1">1</th>
          <th rowspan="2" class="flex-item3">3</th>
        </tr>
        <tr>
          <td class="flex-item2">2</td>
        </tr>
      </table>
    </div>
  </div>

</section>

Answer 3

您可以使用 CSS Grid。我在这里玩了Grid Generator。请使用全屏模式查看输出。

注意：如果有人可以减少此代码，请这样做，因为我刚刚深入研究了 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>