Переместить div сверху вниз на мобильный

Question

Могу ли я сделать это изначально с помощью бутстрапа? Я использую версию 4 (в альфа), но если она работает на версии 3, она должна работать на v4.

У меня 2 дивы внутри колонны, как так

<div class="row"> 
    <div class="col-xs-12"> 
     <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div> 
     <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div> 
    </div> 
</div> 

Есть ли способ я могу получить дивы поменять вокруг на мобильном устройстве? Я не хочу использовать javascript здесь, я бы хотел использовать только классы «bootstrap», если это возможно.

Если это невозможно с помощью бутстрапа, тогда css только пожалуйста.

Answer 1

Не известно о пути достижения этого с помощью начальной загрузки, но это может быть сделано с помощью CSS»flexbox.

• Добавить новый селектор .col-xs-12 со следующими свойствами:
  • display: flex; рассказывает детям пользоваться flexbox моделируют
  • flex-direction: column-reverse; будет гарантировать, что дети потока снизу вверх (а слева по умолчанию направо)

Run ниже Snippet в FUL l экран и измените размер окна, чтобы увидеть порядок изменения элементов.

@media only screen and (max-width: 960px) { 
 
    .col-xs-12 { 
 
    display: flex; 
 
    flex-direction: column-reverse; 
 
    } 
 
}

<div class="row"> 
 
    <div class="col-xs-12"> 
 
    <div>TOP ON DESKTOP, BOTTOM ON MOBILE</div> 
 
    <div>BOTTOM ON DESKTOP, TOP ON MOBILE</div> 
 
    </div> 
 
</div>

Answer 2

.col-xs-12 { height: 200px; position:relative; } 
.col-xs-12 div { position:absolute; top:0; left: 0; width:100%; } 
.col-xs-12 div:last-child { top: auto; bottom: 0; } 

@media (max-width: 480px) { 
    .col-xs-12 div { top:auto; bottom:0; } 
    .col-xs-12 div:last-child { top: 0; bottom: auto; } 
}