html - 这种处理移动/桌面布局的方式是不好的做法吗？

Question

我目前正在尝试找出在手机和台式计算机上处​​理 html 布局的最简单或最佳方法。

现在我是这样做的(示例):

    .hide-web {
      @media (min-width: ....px) {
      display: none;
     }
    }

    .hide-desktop {
      @media (min-width: ....px) {
      display: none;
     }
    }

HTML 看起来像这样:

<div class="hide-web>
 Displaying Element1 and Element2
 <element1>/element1>
 <element2>/element2>
</div>

<div class="hide-desktop>
 Displaying Element1 and Element2 but in different positions
 <element2>/element2>
 table or whatever here....
 <element1>/element1>
</div>

这是一种常见的做法还是很糟糕？

Answer 1

您可以使用 display: flex; 实现相同的行为并在 flex-direction: column 之间切换和 flex-direction: column-reverse

那样的话，您将只有一个 html 结构，并且方向上的更改将在 css 类上进行。

在小元素中，这可能不是问题，但随着元素的增长，重复结构可能会带来很多麻烦。