Question

我正在将物化库用于我的React项目。当我使用col s12 l6样式时，我想更改col的移动顺序。该库是否有默认值？我读到了一些关于push和pull的内容，但都没用，也没有将col包裹在div中，也没有尝试使用order: 1 / {{ 1}}的样式。有什么建议吗？

order: 2

预期输出：

// index.html

<div className="wrapper1">
    <div col s12 l6>
      some text
  </div>
</div>
<div className="wrapper2">
    <div col s12 l6>
      some more text
    </div>
</div>

// main.css

.wrapper1 {
    @media only screen and (max-width: $mobile) {
      order: 2
    }
}

.wrapper2 {
    @media only screen and (max-width: $mobile) {
      order: 1
    }
}

Answer 1

您的代码中有太多错误。

我建议您先学习html和css的基础知识，然后再进行其他操作。

我已经修正并更新了您的标记和媒体查询，以修复所有错误。

.wrapper {
  display: flex;
  flex-direction: column
}

@media only screen and (max-width: 767px) {
  .wrapper1 {
    order: 2
  }
  .wrapper2 {
    order: 1
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
 
<body>
  <div class="wrapper">
    <div class="wrapper1">
      <div class="col s12 l6">
        some text
      </div>
    </div>
    <div class="wrapper2">
      <div class="col s12 l6">
        some more text
      </div>
    </div>
  </div>
</body>

如何在实现中使用CSS顺序？

1 个答案: