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

Question

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

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

现在正如您所见，我正在使用 bootstrap 进行断点管理，我还研究了 CSS 网格，但它似乎无法为我的案例提供解决方案，因为我不希望不重要的信息部分与右侧的某些网格元素对齐，如下所示：

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

我试图想出一个带有 flex-direction: column 的 Flexbox 解决方案，但我认为没有办法让 flexbox 列恰好有两个项目（左侧的 IMG 和不重要的信息，Title/subtitle 和右侧的其余内容）。

的任何最小工作示例

IMG               |  Title
Unimportant Info  |  Rest

在桌面上变为

IMG
Title
Rest
Unimportant Info

在手机上将不胜感激！

Answer 1

使用您当前的代码似乎很难实现这一点，但您可以做一件事，制作 2 个“不重要信息”副本，一个副本将其保留在桌面屏幕的图像下方，另一个副本将其保留在“休息”部分下方使用 CSS.

在各自的屏幕上显示移动屏幕和 show/hide

注意：不推荐，这只是解决方法，因为重复相同的代码不是好的编码习惯。

Answer 2

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

.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/

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

In CSS, is there a way to rip apart and reorder content at a breakpoint?

css

bootstrap-4

flexbox

breakpoints