Question

我正在尝试在div上方显示ul列表，但仅在移动上显示。最好的方法是什么？这是一个简单的代码：

<div>
    <div>
      <p>
        This is a content!       
      </p>
    </div>
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
  </ul>

理想的移动场景如下：

<div>

  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
  </ul>

    <div>
      <p>
        This is a content!       
      </p>
    </div>


</div>

Answer 1

您可以在媒体查询中使用flexbox和order property来翻转弹性项目。

.wrapper {
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 600px) {
  .wrapper>div {
    order: 2;
  }
  .wrapper>ul {
    order: 1;
  }
}

<div class="wrapper">
  <div>
    <p>
      This is a content!
    </p>
  </div>
  <ul>
    <li>Test 1</li>
    <li>Test 2</li>
    <li>Test 3</li>
    <li>Test 4</li>
  </ul>
</div>

在手机上的div上方显示ul列表

1 个答案: