Отображение кода в разных местах на разных разрешениях

попробуй flexbox, используй свойство order (порядок следования элементов). Выставляешь блок последним и растягиваешь на всю ширину

Предлагаю данное решение с помощю jQuery

// слушаем событие изменение ширины
$(window).resize(function () {
      // Сам блок, которому будем менять позицию
  var $block2 = $('id или сlass вашего блока'),
      // актуальная ширина окна 
      windowWidth = $(window).width(),
      // Ширина, где нужно применить перемещение блока
      positionChange = 960,
      // Флаг, что бы отработать 1 раз
      flag = false;
  // Если актуальная ширина окна меньше или равна той, где нужно пременить 
  // новую позицию блока - меняем позицию
  // Если нет -  возращаем блок на место
  if( windowWidth <= positionChange && !flag ) {
    $block2
    .clone()
    .end()
    .remove()
    .appendTo('#newPostion');
    var flag = true;
  } else if ( windowWidth <= positionChange && flag ) {
    $block2
    .clone()
    .and()
    .remove()
    .appendTo('#oldPosition');
    var flag = false;
  }
})

Документация по методам jQuery

• Clone
• Resize
• End
• Remove
• AppendTo

Но все же рекомендую вам избегать данного подхода, так как это плохая практика. Лудчше посмотрите в сторону рефакторинга HTML, и Flex box