gpt4 book ai didi

html - 如何在实现中使用CSS顺序?

转载 作者:行者123 更新时间:2023-11-28 00:04:56 25 4
gpt4 key购买 nike

我正在为我的React项目使用物化库。当我使用col s12 l6样式时,我想更改col的移动顺序。该库随附默认设置吗?我读了一些关于pushpull的东西,它们都没有用,也没有将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

最佳答案

您的代码中有太多错误。

我建议您先开始了解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>

关于html - 如何在实现中使用CSS顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55767086/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com