在手机查看模式下更改flex和删除元素的顺序答案

【问题标题】：Changing order in flex and removing elements in mobile phone viewing mode在手机查看模式下更改flex和删除元素的顺序
【发布时间】：2022-02-08 02:35:01
【问题描述】：

这是我的代码，当我们处于移动查看模式时，我想更改按钮的顺序。我使用了“column-reverse”，但如果我想让它们变成这样呢？按钮 2 按钮 3 按钮 1 如何自定义他们的订单？

我的第二个问题是如何在移动查看模式下摆脱“这是标签”文本？我试过“显示：无”，但由于标签类也包含所有按钮，所有按钮都将被删除。

html {
  box-sizing: border-box;
  font-size: 62.5%;
  font-family: 'Georama', sans-serif;
}
body {
  background-color: #555;
  color: #fff;
  display: flex;
  justify-content: center;
  height: 100vh;
  align-items: center;
}

button {
  margin: 2rem;
  width: 200px;
  height: 50px;
}

.label {
  font-size: 2rem;
  display: flex;
  flex-direction: column;
}

@media only screen and (max-width: 600px) {
  .label {
    flex-direction: column-reverse;
  }
}

<!DOCTYPE html>
<html lang="en">
  <html>
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    </head>
    <body>
      <label class="label">
        this is a label
        <button>Btn 1</button>
        <button>Btn 2</button>
        <button>Btn 3</button>
      </label>
    </body>
  </html>
</html>

【问题讨论】：

要重新排序项目（不仅仅是更改行/列的方向），请在媒体查询中使用order property，而不是flex-direction 属性。
这能回答你的问题吗？ Change div order with CSS depending on device-width
对于标签，您需要将文本包装在带有类的<span> 中。将display: none 添加到媒体查询中的类中，以便为移动设备隐藏它。见Div show/hide media query。

标签： html css flexbox responsive-design

【解决方案1】：

您不必一定要使用flex-direction: column-reverse

由于您使用的是 flex-box，因此使用 order CSS 属性很容易确定元素的顺序。

至于第二个问题，将文字包裹在一个div中，在手机查看模式下添加display: none。

html:

<label class="label">
    <div>this is a label</div>
    <button>Btn 1</button>
    <button>Btn 2</button>
    <button>Btn 3</button>
</label>

css:

@media only screen and (max-width: 600px) {

 label button:nth-of-type(1) { order: 3; }
 
 label div { display: none; }
}

https://jsfiddle.net/kongallis/jsraL3g9/41/

【讨论】：