Как поменять местами два дива в мобильной верстке?

Question

[Jack OXO]

Вот сайт. Внизу контакты из двух блоков: карта и адреса оклейки. Как их в мобильной верстке (@media (max-width: 481px)) поменять местами, чтобы карта находилась под контактной формой? Просто до формы контактов через карту яндекса нереально доскроллиться на телефоне. Заранее спасибо!

Answer 1

[Lumore]

Попробуйте поменять местами эти дивы:

<style>
#contacts {
float: right;
}
#map {
float: left;
}
@media screen and (max-width: 481px) {
#map, #contacts {
float: none;
}
}
</style>
<div id="contacts"></div>
<div id="map"></div>

Comments

[Jack OXO]

они тогда будут так следовать при всех разрешениях: сначала форма, потом контакты?

[littleguga]

OXOJeck: нет, будет то, что Вам нужно.

[Jack OXO]

спасибо, легло как надо

Answer 2

[Дмитрий Пыркин]

section{
display: flex; 
        display: -webkit-flex ;
  -webkit-flex-direction: column;
  flex-direction: column;
  display:-webkit-box;
  -webkit-box-orient:vertical;
}
.block1{
    -webkit-box-ordinal-group: 2;
    -webkit-order: 2;              
    order: 2;  
  }
  .block2{
       -webkit-box-ordinal-group: 1;
    -webkit-order: 1;                   
    order: 1;  
  }

Answer 3

[3luyka]

<div class="right-side" style="float: right;">Left side</div>
<div class="left-side" style="float: left;">Right side</div>

@media and (max-width: ....) {
.right-side{ float: left; }
.left-side{ float: right; }
}

Answer 4

[zjoin]

Можно в ccs c помощью flexbox: там есть свойство order, которое меняет местами елементы

Comments

[Jack OXO]

у меня, как видите, сейчас сетка из дивов. Примешивать flexbox сейчас как то не в тему :)