Как изменить порядок точек останова столбца в materializecss? - PullRequest
Новая
       10

Как изменить порядок точек останова столбца в materializecss?

0 голосов
/ 25 января 2019

Как изменить порядок точек останова столбца в 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.

Рабочий стол - Мобильный просмотр Как изменить порядок перерывов?Я хочу, чтобы сначала был текст вместо пингвина.

Какие классы мне нужно добавить для этого примера?

1 Ответ

0 голосов
/ 25 января 2019 

@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 tex/11025785/kak-izmenit-poryadok-tochek-ostanova-stolbtsa-v-materializecsst 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>
...