1

Как с помощью 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>

2
  • 2
    Используй css, а не js.
    – Qwertiy
    24 мар 2017 в 11:58
  • Как именно ? - Мне кажется в этом случае только javascript
    – Xzizz
    24 мар 2017 в 12:09

2 ответа 2

3

Например без 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>

7
  • На сколько этот вариант кроссбраузерный ? На компьютере все гладко , на телефоне ничего не меняется местами.
    – Xzizz
    24 мар 2017 в 13:02
  • попробовал 2 разных телефона , android 4+ и 6+ блоки не переставляются
    – Xzizz
    24 мар 2017 в 13:12
  • @Vipz, я добавила в ответ о кроссбраузерности.
    – SVE
    24 мар 2017 в 13:18
  • @Vipz, добавила вариант с jquery, хотя считаю это неприемлемым.
    – SVE
    24 мар 2017 в 13:27
  • 1
    Блин , как здорово что есть такое место , где можно о чем то спросить и так оперативно получать ответы. Большое всем спасибо !
    – Xzizz
    24 мар 2017 в 15:55
1

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

2
  • аж на 30сек опередила))) добавила тоже еще табличный вариант
    – SVE
    24 мар 2017 в 13:39
  • Блин , как здорово что есть такое место , где можно о чем то спросить и так оперативно получать ответы. Большое всем спасибо !
    – Xzizz
    24 мар 2017 в 15:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.