html – 如何在不同的设备上交换网格位置(materializecss)？

概述我正在使用 MaterializeCSS建立一个网站 我有两个盒子： A(col s12 m8 l8) B(col s12 m4 l4) <div class="container"> <div class="row"> <!-- Box A --> <div class="col s12 m8 l8"> <!-- details - 我正在使用 MaterializeCSS建立一个网站

我有两个盒子：
A(col s12 m8 l8)
B(col s12 m4 l4)

<div >    <div >        <!-- Box A -->        <div >            <!-- details -->        </div>        <!-- Box B -->        <div >            <!-- details -->        </div>    </div></div>

在桌面上,我喜欢它的方式,左边是方框A,右边是方框.然而,在移动设备上,而不是A在顶部,我希望B先成为A.我已经尝试了浮动：直到方框A但它没有用.我怎样才能达到这个效果？

解决方法 您可以使用灵活的方法.根据所需的值修改最大宽度.根据 MaterializeCSS grid documentation,600px是移动设备宽度.

@media (max-wIDth: 768px) {  .flex-s {    display: flex;    flex-direction: column; /* Stack on top */  }  .Box-a {    order: 2; /* Go down,bring Box B up */  }}

<link href="https://cdnjs.cloudflare.com/AJAX/libs/materialize/0.97.0/CSS/materialize.min.CSS" rel="stylesheet" /><div >  <div >    <!-- Box A -->    <div >      Box A    </div>    <!-- Box B -->    <div >      Box B    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 如何在不同的设备上交换网格位置(materializecss)？全部内容，希望文章能够帮你解决html – 如何在不同的设备上交换网格位置(materializecss)？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。