Поменять DIV местами если экран меньше 992px

262

26 марта 2017, 05:37

Как с помощью Javascript поменять 'div' местами по вертикали. - Должен применяться если экран меньше 992px - Отменяться если стал больше 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>

Answer 1

Например без js - flex (oreder - задает порядок расположения):

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

Кроссбраузерность flex . Кстати bootstrap4 и в сетке использует уже flex/

Вариант с 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>

Вариант с 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>

Answer 2

Кроссбраузерный вариант без 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Загрузка страницы не прекращается

Всем доброго времени сутокНа одном из сайтов заметил, что не прекращается загрузка страницы(индикатор в заголовке вкладки не перестает вращаться)

288

javascript

как получить текст с выбранного option

290

javascript

React js формирование JSX на основе строки

Добрый деньИспользую React JS

294

javascript

Python json запись в csv: AttributeError: 'list' object has no attribute 'str'

Добрый день Есть json

256