How to swap two divs in mobile layout?

Question

css

Here is the site . At the bottom are contacts from two blocks: a map and pasting addresses. How to swap them in the mobile layout (@media (max-width: 481px)) so that the map is under the contact form? It's just impossible to scroll to the contact form through the Yandex map on the phone. Thanks in advance!

Answer 1

Try swapping these divs:

<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>

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

<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

You can use flexbox in ccs: there is an order property that swaps elements