пользовательские колонки положение начальной загрузки

Question

я есть проблема с колонки начальной загрузки, когда дисплей на мобильном устройстве,

так что этот пример:

<div class="row"> 
    <div class="col-md-5"> </div> 
    <div class="col-md-7"> </div> 
</div> 

, когда дисплей на мобильном, COL-MD-5 появится в верхней и col-md-7 появится внизу.

но я хочу, col-md-5 появится ниже, а col-md-7 появится вверху.

Есть предложения для меня?

Answer 1

Не уверен, что это правильная практика, но вы могли бы использовать "скрытые" или "видимые" классы

'скрытые':

<div class="row"> 
    <div class="col-md-5 hidden-xs hidden-sm">content abc </div> 
    <div class="col-md-7"> </div> 
    <div class="col-md-5 hidden-md hidden-lg">content abc </div> 
</div> 

или 'видимый':

<div class="row"> 
    <div class="col-md-5 visible-md visible-lg">content abc </div> 
    <div class="col-md-7"> </div> 
    <div class="col-md-5 visible-xs visible-sm">content abc </div> 
</div> 

Ссылка на скрытые и видимые классы в bootstrap: Bootstrap responsive utilities

Answer 2

Есть два варианта Либо поместить col-md-7 в HTML, как:

<div class="row"> 
    <div class="col-md-7"> </div> 
    <div class="col-md-5"> </div> 
</div> 

Или использовать положение абсолютно для мобильных устройств, как:

.row { 
 
    position: relative; 
 
} 
 
.col-md-5 { 
 
    position: absolute; 
 
    top: 20px; 
 
} 
 
.col-md-7 { 
 
    position: absolute; 
 
    top: 0; 
 
}

<div class="row"> 
 
    <div class="col-md-5">col 5 </div> 
 
    <div class="col-md-7">col 7 </div> 
 
</div>

Надеется, что это помогает.