在 CSS 中，有没有办法在断点处拆分和重新排序内容？答案

【问题标题】：In CSS, is there a way to rip apart and reorder content at a breakpoint?在 CSS 中，有没有办法在断点处拆分和重新排序内容？
【发布时间】：2022-01-05 17:43:45
【问题描述】：

我正在构建一个响应式网站，它对移动视图有非常具体的要求，我似乎无法将其与桌面布局的外观结合起来。谁能想到一种方法，让桌面布局保持不变，但在移动设备上，“不重要信息”部分一直向下移动到最后？

@media (min-width: 576px) {
  #page {
    margin-left: 20px;
    margin-right: 20px;
  }
}

@media (min-width: 1040px) {
  #page {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
  }
}

#left-panel {
  background-color: #eeeeee;
}

a {
  color: #c00;
  text-decoration: none;
}

.panel-padding {
  width: 100%;
  padding: 0px 10px;
}

.table-keyword {
  text-align: right;
  font-weight: bold;
  width: 100px;
}

.figure-caption {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="/styles.css">
</head>

<body>
  <div id="page">

    <div class="container-fluid">
      <div class="row">
        <div id="left-panel" class="col-sm-4 mt-3 p-3 pb-0">

          <img src="https://media.istockphoto.com/vectors/no-image-vector-symbol-missing-available-icon-no-gallery-for-this-vector-id1128826884?k=20&m=1128826884&s=612x612&w=0&h=3GMtsYpW6jmRY9L47CwA-Ou0yYIc5BXRQZmcc81MT78=" alt="screenshot" width="100%">
          <p>
          <h5>Unimportant Info:</h5>
          Lorem ipsum dolor sit amet.
          </p>
        </div>

        <div id="right-panel" class="col-sm-8 mt-3 p-2 py-0">
          <div class="panel-padding">

            <h3>
              Title
            </h3>
            <p>
              Subtitle
            </p>
            <table class="table">
              <tbody>
                <tr>
                  <th class="table-keyword">Access:</th>
                  <td>
                    <a href="#">somelink</a><br>
                    <span style="font-size: small;">Captured 2018-08-02. Restricted access - no reuse. © xmlpiccyj14, 2019</span>
                  </td>
                </tr>
                <tr>
                  <th class="table-keyword">Preview:</th>
                  <td>
                    <figure class="figure">
                      <img src="https://media.istockphoto.com/vectors/no-image-vector-symbol-missing-available-icon-no-gallery-for-this-vector-id1128826884?k=20&m=1128826884&s=612x612&w=0&h=3GMtsYpW6jmRY9L47CwA-Ou0yYIc5BXRQZmcc81MT78=" alt="screenshot" width="100px">
                      <figcaption class="figure-caption">Screenshot</figcaption>
                    </figure>
                  </td>
                </tr>
                <tr>
                  <th class="table-keyword">Contributors:</th>
                  <td>
                    Artist 1 <br> Artist 2
                  </td>
                </tr>
              </tbody>
            </table>

          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>

</html>

现在你看到我正在使用引导程序进行断点管理，我也研究了 CSS Grid，但它似乎不会为我的情况提供解决方案，因为我不想要不重要信息部分与右侧的某些网格元素对齐，如下所示：

[IMG]              | [Title]
                   | [Subtitle]
–––––––––––––––––––+––––––––––––––––––
[Unimportant Info] | [Rest of Content]

我试图用flex-direction: column 想出一个使用 Flexbox 的解决方案，但我认为没有办法让 flexbox 列正好有两个项目（左侧的 IMG 和不重要的信息、标题/副标题和其余部分）右侧的内容）。任何最小的工作示例，其中

IMG               |  Title
Unimportant Info  |  Rest

桌面变成

IMG
Title
Rest
Unimportant Info

在移动设备上将不胜感激！

【问题讨论】：

显然我的问题被否决了。 Downvoters 请给我一个简短的评论我应该做得更好。我不知道如何才能获得我需要的知识。

标签： css bootstrap-4 flexbox breakpoints

【解决方案1】：

使用您当前的代码似乎很难实现这一点，但您可以做一件事，制作 2 个“不重要信息”副本，一个副本将其保留在桌面屏幕的图像下方，另一个副本将其保留在移动屏幕的“休息”部分下方并使用 CSS 在各自的屏幕上显示/隐藏它们。

注意：不建议这样做，它只是解决方法，因为重复相同的代码不是好的编码习惯。

【讨论】：

两个带有“不重要信息”的元素完全没问题。对此没有任何建议，并且是可接受的编码实践。我会在您的答案中添加代码以使其完整。你提供了一个非常好的答案。如果“不重要的信息”是 iframe 或类似动态表单的东西 - 那么也许我会重新考虑添加它两次。
非常感谢！我本来想简单地将它添加两次，但对于这个看似简单的问题来说似乎太hacky了。现在似乎没有更好的解决方案，所以我想我会这样做......

【解决方案2】：

最后我自己找到了使用 CSS Grid 的解决方案：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "img right"
    "bla right";
}

.left-top {
  grid-area: img;
}

.left-bottom {
  grid-area: bla;
  background: green;
}

.right {
  grid-area: right;
  background: lightblue;
}

@media only screen and (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "right"
      "bla";
  }
}

<div class="grid">
  <div class="left-top">
    <img id="screenshot" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/640px-Image_created_with_a_mobile_phone.png" alt="screenshot" width="100%">
  </div>
  <div class="left-bottom">
    Unimportant Information
  </div>
  <div class="right">
    Title <br> Rest
  </div>
</div>

https://jsfiddle.net/eqcvs9zr/23/

【讨论】：