是否可以在 HTML/CSS 中创建这种移动与桌面布局？答案

【问题标题】：Is it possible to create this mobile vs desktop layout in HTML/CSS?是否可以在 HTML/CSS 中创建这种移动与桌面布局？
【发布时间】：2021-02-14 15:56:43
【问题描述】：

我有点进退两难，我想为网页版和移动版创建不同的布局。它将使用页面的相同部分，但网络与移动设备的顺序不同。这就是我的意思。你觉得这可以创造吗？

桌面版：

<table>
  <tr>
    <td>A</td>
    <td>B</td>
  </tr>
  <tr>
    <td>E</td>
    <td>C</td>
  </tr>
  <tr>
    <td>F</td>
    <td>D</td>
  </tr>
</table>

手机版：

<table>
  <tr>
    <td>A</td>
  </tr>
  <tr>
    <td>B</td>
  </tr>
  <tr>
    <td>C</td>
  </tr>
  <tr>
    <td>D</td>
  </tr>
  <tr>
    <td>E</td>
  </tr>
  <tr>
    <td>F</td>
  </tr>
</table>

注意桌面版的左栏是 A，而右栏是 B C D。

这可能吗？

更新：抱歉，我并不是要使用表格，而只是为了显示我的问题的内容。下面提供的两个答案是正确的步骤，但我忘了提到这将如何处理高度不同的动态内容？例如，让我们看看 C 是一些对某些页面来说很短而对其他页面来说很长的文本。对于高度不同的动态内容，我将如何使用网格模板区域？

【问题讨论】：

是的，使用 CSS 网格最简单。现在也不要使用表格来布局东西，使用 css 网格。现代方法的方式
我主张使用 flex 并为所有平台提供相同的服务（并且没有媒体查询）。
为了争论，即使@media 查询也可以。
@Theraot 在这种情况下，flexbox 的问题是桌面设计的奇怪顺序。因此，使用网格然后使用弹性框会更好。
@tacoshy 查看有问题的更新。

标签： html css web responsive

【解决方案1】：

正如已经提到的，您可以使用 CSS-Grid 以最简单的方式做到这一点。我假设您已经知道如何应用媒体查询。下面的 2 个 sn-ps 具有相同的代码。只是 CSS-Grid (body) 的模板略有变化。

桌面：

body {
  margin: 0;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  grid-gap: 5px;
  grid-template-areas:
    "A B"
    "E C"
    "F D";
}

div {
  border: 1px solid black;
  padding: 5px;
  min-height: 50px;
}

#A {
  grid-area: A;
}

#B {
  grid-area: B;
}

#C {
  grid-area: C;
}

#D {
  grid-area: D;
}

#E {
  grid-area: E;
}

#F {
  grid-area: F;
}

<body>
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
  <div id="E">E</div>
  <div id="F">F</div>
</body>

手机：

body {
  margin: 0;
  padding: 5px;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: auto;
  grid-gap: 5px;
  grid-template-areas:
    "A"
    "B"
    "C"
    "D"
    "E"
    "F";
}

div {
  border: 1px solid black;
  padding: 5px;
  min-height: 50px;
}

#A {
  grid-area: A;
}

#B {
  grid-area: B;
}

#C {
  grid-area: C;
}

#D {
  grid-area: D;
}

#E {
  grid-area: E;
}

#F {
  grid-area: F;
}

<body>
  <div id="A">A</div>
  <div id="B">B</div>
  <div id="C">C</div>
  <div id="D">D</div>
  <div id="E">E</div>
  <div id="F">F</div>
</body>

【讨论】：

【解决方案2】：

您也可以使用网格或 Flex（订单）...

弹性示例：

.wrap{
    width: 50px;
    display: flex;
    flex-wrap: wrap;
    }

.wrap div{
    flex: 0 0 50%;
}

<div class="wrap">
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="E">E</div>
    <div id="C">C</div>
    <div id="F">F</div>
    <div id="D">D</div>
</div>

对于移动视图：

.wrap{
    width: 50px;
    display: flex;
    flex-wrap: wrap;
}

.wrap div{
    flex: 0 0 100%;
}

#A{order: 1;}
#B{order: 2;}
#C{order: 3;}
#D{order: 4;}
#E{order: 5;}
#F{order: 6;}

<div class="wrap">
    <div id="A">A</div>
    <div id="B">B</div>
    <div id="E">E</div>
    <div id="C">C</div>
    <div id="F">F</div>
    <div id="D">D</div>
</div>

【讨论】：

感谢您的回答，请查看我的相关更新。