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

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

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

<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 — вверху.

Любое предложение для меня?


html css twitter-bootstrap col
person Afrgun    schedule 07.05.2015    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

'скрытый':

<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

person Vault Dweller    schedule 07.05.2015
comment
Спасибо за ответ, я надеюсь, что этот способ может работать для меня. :) - person Afrgun; 07.05.2015
comment
Без проблем! рад слышать, что это помогло. Имейте в виду, что я не уверен, является ли это «лучшей практикой» или нет. Просто то, что сработало для меня и не вызвало проблем. - person Vault Dweller; 07.05.2015

arrow_upward
1
arrow_downward

Есть два варианта. Либо поместите 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>

Надеюсь, поможет.

person ketan    schedule 07.05.2015
comment
Спасибо за ответ, ранее я пытался установить дно: 0px для md-5. но это не работает для меня. set top: 20px для md-5, для меня это работает. - person Afrgun; 07.05.2015