Andrew

Так меняйте ширину .container, как хотите. тамж колонки процентно считаются
https://codepen.io/kickerock-the-decoder/pen/WLPmLV

уже хотелось бы наконец-то начать становиться более уверенным верстальщиком

нужно, чтобы хорошо выглядело на разных разрешениях.

Знаю, что есть медиа квери, но для этого нужно писать дополнительный код и это увеличивает время разработки - такой вариант на данный момент не подходит

Ну-ну. Так вы уже определитесь, что вам нужно, "ленивый" - сиюминутный результат или всё же "подкачать" вёрстку.
Много нюансов при задании отступов и размеров относительными единицами. Если заказчика устроит ваш адаптив, то пишите как угодно, но нам дизайнеры либо делают макеты под несколько поинтов, либо обговаривает как и куда оно будет расширяться/сдвигаться
Пишите медиа-запросы под несколько брейк-поинтов и будет вам счастье(Ширина экрана: 376,768,1024,1378+).
em,rem - относительно шрифта родительского блока/бади
x% - относительно высоты/ширины родителя
vh,vw - относительно высоты/ширины экрана устройства.

По клику присваиваете контейнеру ваших кнопок какой-то класс(к примеру rotate), прописываете стили для элементов под этим классом.
Так
Тут стили применяются ко всем детям .rotate
Можно и через js,без доп.стилей, там нужно перебрать все элементы и поменять им стили.

Но чтобы позиционирование текста оставалось читабельным, то есть как обычно.

хмм. Если не нужно вертеть текст - то просто поменяйте местами ширину и высоту js-ом у всех кнопок

.primer1 div:first-child{
bla: bla-bla
}

Какая версия?
Это пробовали?

Даёте всем трём блокам display:none;

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
let randomItem = Math.ceil(getRandomArbitrary(0,3));
if(window.innerWidth<414){
document.getElementsByClassName('any-class')[randomItem].style.display="block";
}

Вот так
гугл тоже знает

Код хотелось бы

:)
С чем вы проверять будете? Вам нужно хранить в базе/чем-угодно другом значение промокодов, по сабмиту(клику на любую кнопку) делать запрос к этим значения -> проверять есть ли оно там -> говорить пользователю ответ.
Да, можно хранить массив с кодами в Js'е, но туда легко проникнуть и подсмотреть его
Удачи

Как вы в разработчики(верстальщики) пошли с таким любопытством
https://codepen.io/kickerock/pen/yRzLLp

Предполагаю, что у вас не Pro-версия, а это Pro-компонент

.js'ы где?
Читайте

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Looping is encoded into the GIF itself, not the img tag. Open the GIF in an image editor and change the mode to loop, or use a different GIF. The loop attribute is an invalid, deprecated attribute only meant to work when the src is a video.

Отсюда
Можете поиграться с загрузкой изображения заново, каждые 2 секунды после hover'а, но лучше за'loop'те gif'ку.

<input type="email">
Во время сабмита, по-дефолту проверяет(и выводит сообщение), если неправильно введёно мыло(#@#.#) и введены символы.