How to change the breakpoint order of column in 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: The first <div class="col s12 m2"></div> just for specific space in my html.

Desktop View to Mobile View How can I change the break order? I want to have the text first instead of the penguin.

Which classes do I need to add for this example?

Solution

@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>