Flex 布局：div 在桌面上位于下方，但在移动设备上位于所有内容的最后

Question

制作我的第一个 flex 布局（请参阅附图以了解桌面和小型设备中部分的所需位置）。

Div (title "License") 根据屏幕宽度需要更改其顺序：在移动设备上显示为最后，但在桌面上显示在左侧第一列中的文本之后。

这甚至可以仅使用 flex 吗？也许应该考虑网格布局模型？

我的 flex 示例很简单，除了在桌面上获得下面的 "license" div（因为 flex-direction:row;）我使用了一些技巧：

.break-column {
  flex-basis: 100%;
  width: 0;
}

到目前为止，在移动设备上的设计工作正常，而在桌面上，div 仍然显示为最后。

我的 HTML 结构可能有误。指向正确的方向会有所帮助！

提前致谢！

https://jsfiddle.net/virsis12/j6sc8g5t/13/

Answer 1

我不完全确定你在问什么..你的问题很混乱。但是，如果您想要更改弹性订单，请使用订单属性重新排列您的 div 以您喜欢的方式。这与@media 查询一起应该可以解决您的问题。

例如，

.home__flex {
    display: flex;
}

@media (min-width: 900px) {
    .cover__wrapper { order: 2; }
    .content-license { order: 1; }
    .links__wrapper { order: 3; }
    .other-links { order: 4; }
}

这会将您的 .content-license div 移到大于 900px 的屏幕上的第一个位置，然后是：.cover__wrapper，然后 .links__wrapper，然后 .other-links *确保每个 div 分配了订单 .

更多信息请参考W3Schools Flexbox。试试吧，W3Schools Editor

Answer 2

有两种方法可以使用 flexbox 实现此布局

使用javascipt在window上添加resize事件侦听器，当屏幕宽度变得小于特定宽度时，将.content-license元素放在网页的末尾
您可以复制 .content-license 元素，一个放在 .content__wrapper 中，另一个放在网页末尾。在大屏幕上，隐藏网页末尾的那个，在小屏幕上，隐藏在 .content__wrapper

以下代码使用了后一种方法，因为此方法中不涉及 javascript。

.home__flex {
  display: flex;
  background: rgb(230, 253, 214);
  flex-wrap: wrap;
}

.cover__wrapper {
  display: flex;
  flex-direction: column;
  padding: 15px;
}

.content-license {
  padding: 15px;
}

.cover__wrapper .content-license {
  display: none;
  padding: 0;
}

.cover__wrapper img {
  width: 50%;
  height: 200px;
  align-self: center;
}

.links__wrapper {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  padding: 15px;
}

@media (min-width: 550px) {
  .content-license {
    display: none;
  }
  .cover__wrapper .content-license {
    display: block;
  }
}

@media (min-width: 750px) {
  .cover__wrapper {
    flex-basis: 20%;
    padding: 35px;
  }
  .cover__wrapper img {
    width: 100%;
  }
}

@media (min-width: 850px) {
  .cover__wrapper {
    flex-basis: 20%;
  }
  .links__wrapper {
    padding: 0 35px;
  }
}

<div class="container__home">
  <div class="home__flex">
    <div class="cover__wrapper">
      <img class="cover" src="https://i.ibb.co/Kx6Hm9w/dang.png" alt="dang" border="0">
      <div class="content-descr">
        <p>
          Until recently, the prevailing view assumed lorem ipsum was born as a nonsense text. “It's not Latin, though it looks like it, and it actually says nothing, After magazine answered a curious reader.
        </p>
      </div>
      <div class="content-license">
        <h2>Licence</h2>
        <p>
          Licensed under a Creative Commons attribution-noncommercial license.
        </p>
      </div>
    </div>
    <div class="links__wrapper">
      <div class="table-of-contents">
        <h1>Content</h1>
        <ol>
          <li>Until recently, the prevailing view </li>
          <li>It's not Latin, though it looks</li>
          <li>Its ‘words’ loosely approximate the frequency</li>
          <li>which is why at a glance it looks pretty real</li>
          <li>Until recently, the prevailing view </li>
          <li>It's not Latin, though it looks</li>
          <li>Its ‘words’ loosely approximate the frequency</li>
          <li>which is why at a glance it looks pretty real</li>
          <li>Until recently, the prevailing view </li>
          <li>It's not Latin, though it looks</li>
          <li>Its ‘words’ loosely approximate the frequency</li>
          <li>which is why at a glance it looks pretty real</li>
          <li>Until recently, the prevailing view </li>
          <li>It's not Latin, though it looks</li>
          <li>Its ‘words’ loosely approximate the frequency</li>
          <li>which is why at a glance it looks pretty real</li>
          <li>Until recently, the prevailing view </li>
          <li>It's not Latin, though it looks</li>
          <li>Its ‘words’ loosely approximate the frequency</li>
          <li>which is why at a glance it looks pretty real</li>
          <li>Until recently, the prevailing view </li>
          <li>It's not Latin, though it looks</li>
          <li>Its ‘words’ loosely approximate the frequency</li>
          <li>which is why at a glance it looks pretty real</li>
          <li>Until recently, the prevailing view </li>
          <li>It's not Latin, though it looks</li>
          <li>Its ‘words’ loosely approximate the frequency</li>
          <li>which is why at a glance it looks pretty real</li>
          <li>Until recently, the prevailing view </li>
          <li>It's not Latin, though it looks</li>
          <li>Its ‘words’ loosely approximate the frequency</li>
          <li>which is why at a glance it looks pretty real</li>
        </ol>
      </div>
      <div class="other-links">
        <h2>Other</h2>
        <ul class="links">
          <li><a href="code">After magazine</a></li>
          <li><a href="errata.html">looks pretty cool</a></li>
          <li><a href="/">Lots of laugh</a></li>
        </ul>
      </div>
    </div>
    <div class="break-column"></div>
    <div class="content-license">
      <h2>Licence</h2>
      <p>
        Licensed under a Creative Commons attribution-noncommercial license.
      </p>
    </div>
  </div>
</div>

Flex 布局：div 在桌面上位于下方，但在移动设备上位于所有内容的最后

Flex layout: div on desktop takes place below, but on mobile last of all content

html

css

layout

flexbox

responsive