Сергей delphinpro

Заворачиваем все в контейнер и делаем что хотим

<div class="layout">
  <main class="layout__main"></main>
  <aside class="layout__aside1"></aside>
  <aside class="layout__aside2"></aside>
</div>

.layout {
  display: flex;

  &__main   { order: 2; width: auto;  flex: 1 0 auto; }
  &__aside1 { order: 1; width: 300px; flex: 0 0 auto; }
  &__aside2 { order: 3; width: 200px; flex: 0 0 auto; }
}

Меняя order, меняем порядок

Насколько я помню этот плагин, правила валидации описываются через атрибут name (или data-атрибуты самого поля)
У вас скрипт конфигурации не соответствует имеющимся полям

Не получится, скорее всего.
Используйте кастомные решения. Отличный ползунок — ionden.com/a/plugins/ion.rangeSlider/index.html

Генерим кучу элементов (на каждый штрих).
Отслеживаем мышь над компонентом.
По X-координате рассчитываем функцию синуса для двух периодов.
По Y-координате вносим небольшой коээффициент, чтобы высота волны реагировала на положение мыши по вертикали (опционально)
По этим значениям раскидываем близлежащим элементам стили трансформаций (translateY(computedValue))

Странный вопрос... Конечно, можете.
Только обратите внимание на максимальный объем ОЗУ, поддерживаемый вашей материнкой.

Потому что в такой записи функция является выражением. Именованным выражением, если быть точнее. А имя именованного функционального выражения является локальным для этого выражения, и доступно только внутри.
Значение этого выражения никуда не присваивается, а используется только вычисления условия. Функция у нас приводится к истине, условие выполняется. А внутри идет обращение к несуществующему в этом скоупе идентификатору f, вылетает undefined или Error в стрикт-режиме.

Ничего хитрого вроде jsfiddle.net/hs8juyat

https://codepen.io/anon/pen/ZjvXEp