Question

如何更改materializecss中列的断点顺序？

    <div class="row">
    <div class="col s12 m2"></div>
    <div class="col s12 m10">
        <div class="offset-m2 l6 offset-l3">
            <div class="card-panel grey lighten-5 z-depth-1">
                <div class="row valign-wrapper">
                    <div class="col s12 m2">
                        <img src="https://cdn.pixabay.com/photo/2016/03/31/19/58/avatar-1295429_960_720.png" alt="" class="circle responsive-img">
                    </div>
                    <div class="col s12 m10">
                        <span class="black-text">example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text example text <br><br>
                        </span>
                    </div>
                </div>    
            </div>
        </div>
    </div>
</div>

PS：第一个<div class="col s12 m2"></div>仅用于html中的特定空间。

Desktop View 至 Mobile View 如何更改中断顺序？我想先有文字，而不是企鹅。

此示例需要添加哪些类？

Answer 1

@media only screen and (max-width: 600px){
    .flex-container {
        padding: 0;
        margin: 0;
        list-style: none;
      
        -ms-box-orient: horizontal;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -moz-flex;
        display: -webkit-flex;
        display: flex;
      
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
    }
    .flex-item:nth-of-type(1) { order: 2; }
    .flex-item:nth-of-type(2) { order: 1; }

    .flex-item:nth-of-type(1){
        text-align: center;
    }
}

 <div class="row">
    <div class="col s12 m2"></div>
    <div class="col s12 m10">
        <div class="offset-m2 l6 offset-l3">
            <div class="card-panel grey lighten-5 z-depth-1">
                <div class="row valign-wrapper flex-container">
                    <div class="col s12 m2 flex-item">
                        <img src="https://cdn.pixabay.com/photo/2016/03/31/19/58/avatar-1295429_960_720.png" alt="" class="circle responsive-img">
                    </div>
                    <div class="col s12 m10 flex-item">
                        <span class="black-text">example text example text example text example text example text example text example text example texhttps://stackoverflow.com/questions/54363459/how-to-change-the-breakpoint-order-of-column-in-materializecss#t example text example text example text example text example text example text example text example text example text <br><br>
                        
                        </span>
                    </div>
                </div>    
            </div>
        </div>
    </div>
</div>

如何在materializecss中更改列的断点顺序？

1 个答案: