How to use Javascript to swap the 'div' vertically. - Should be used if the screen is less than 992px - Canceled if it has become more than 991px

window.onload = function(){ var block_1 = document.getElementById("block_1"); var block_2 = document.getElementById("block_2"); block_1.style.marginTop = block_2.offsetHeight + "px"; block_2.style.marginTop = -(block_1.offsetHeight + block_2.offsetHeight) + "px"; } 
 #block_1 { height:50px; background:red; } #block_2 { height:35px; background:green; } 
 <div id="block_1">Блок 1</div> <div id="block_2">Блок 2</div>

  • 2
    Use css, not js. - Qwertiy ♦
  • How exactly ? - I think in this case only javascript - Vipz

2 answers 2

For example, without js - flex ( oreder - sets the order of location):

 #block_1 { height:50px; background:red; } #block_2 { height:35px; background:green; } .row { display: flex; flex-flow: column nowrap; } @media screen and (min-width: 992px){ #block_2 { order: 1; } #block_1 { order: 2; } } 
 <div class="row"> <div id="block_1">Блок 1</div> <div id="block_2">Блок 2</div> </div>

Cross-browser flex . By the way, bootstrap4 and in the grid already uses flex /

Option with table :

 #block_1>div { height:50px; background:red; } #block_2>div { height:35px; background:green; } @media screen and (min-width: 992px) { .row { display: table; width: 100%; } #block_1 { display:table-footer-group; } #block_2 { display:table-header-group; } } 
 <div class="row"> <div id="block_1"> <div> Блок 1 </div> </div> <div id="block_2"> <div> Блок 2 </div> </div> </div>

Option with jquery :

 $(window).on('load resize', function(){ var win = $(window), bl1 = $('#block_1'), bl2 = $('#block_2'), h1 = bl1.height(), h2 = bl2.height(); if(win.width() < 520){ bl2.css({ 'transform' :'translateY(- ' + h1 + 'px)', '-webkit-transform' :'translateY(' + -h1 + 'px)' }); bl1.css({ 'transform' :'translateY(' + h2 + 'px)', '-webkit-transform' :'translateY(' + h2 + 'px)' }); } else { bl2.css({ 'transform' :'translateY(0px)', '-webkit-transform' :'translateY(0px)' }); bl1.css({ 'transform' :'translateY(0px)', '-webkit-transform' :'translateY(0px)' }); } }); 
 #block_1 { height:50px; background:red; } #block_2 { height:35px; background:green; } 
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <div class="row"> <div id="block_1">Блок 1</div> <div id="block_2">Блок 2</div> </div>

  • How much does this option crossbrowser? On the computer, everything is smooth, on the phone, nothing changes places. - Vipz
  • I tried 2 different phones, android 4+ and 6+ blocks are not rearranged - Vipz
  • @Vipz, I added a response about cross-browser compatibility. - HamSter
  • @Vipz, added a variant with jquery, although I consider this unacceptable. - HamSter
  • one
    Damn, how great is that there is a place where you can ask something and so promptly receive answers. Thank you very much! - Vipz

Cross-browser version without JS:

 #block_1 { height:50px; background:red; } #block_2 { height:35px; background:green; } .row { display: table; width:100%; } @media (max-width: 992px){ #block_1 { display: table-footer-group; } #block_2 { display: table-header-group; } } 
 <div class="row"> <div id="block_1">Блок 1</div> <div id="block_2">Блок 2</div> </div>

  • Already by 30 seconds ahead))) also added another tabular version - HamSter
  • Damn, how great is that there is a place where you can ask something and so promptly receive answers. Thank you very much! - Vipz