如何使用物化的css-order？

Question

我正在为我的反应项目使用materialize库。 当我使用col s12 l6样式时，我想在移动时更改col的顺序。 库中是否有默认值？ 我读了一些关于push和pull东西，它不起作用，既没有将col包装在div也尝试使用order: 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
    }
}

预期产量：

//on desktop

some text
some more text

//on mobile

some more text
some text

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-order？

问题描述

1 个解决方案

解决方案1
0 2019-04-23 20:31:45

如何使用物化的css-order？

问题描述

1 个解决方案

解决方案1 0 2019-04-23 20:31:45

解决方案1
0 2019-04-23 20:31:45