Ivanq

Ну например

$('.caption').click(function(){
if(window.matchMedia('(max-width: 991px)').matches) {
$(this).siblings('.info-descr').slideToggle();
$(this).find('.right-arrow').toggleClass('rotate');
}
});

Если нужно руками (JavaScript) менять заполненность:
https://jsfiddle.net/Ivanq/bor3ag9v/4/

<div class="column-wrapper">
  <div class="column-button">Заказать</div>
  <div class="column"></div>
</div>

.column-wrapper {
  position: relative;
}
.column {
  display: inline-block;
  width: 200px;
  height: 300px;
}
.column-button {
  display: inline-block;
  width: 180px;
  height: 30px;
  position: absolute;
  left: 10px;
  bottom: 20px;
}
.column-button:hover ~ .column {
  /* Меняем .column при наведении на кнопку */
}

Привел минимальный код. Если хочется посмотреть в действии, с красивостями, https://jsfiddle.net/Ivanq/pystopLx/

Приходится ставить кнопку перед столбцом, потому что иначе обратиться нельзя.

TL;DR Как у классов - они же псевдо-классы

count the number of other attributes and pseudo-classes in the selector (= c)

other attributes - все кроме ID и названий элементов, которые описываются отдельно. То есть, это включает классы, а рядом описаны псевдо-классы => специфичность одинакова.

Не 1, 10, 100, 1000, а 1, 256, 65536, ... Например, чтобы перекрыть ID классами, нужно 256 классов. (а лучше 257)

UPD Сейчас этот баг пофикшен. Теперь ID нельзя перезаписать классами

У Вас footer, скорее всего, не прибит к низу. Как с помощью CSS прижать footer к низу окна браузера

background-position: center;
background-size: cover;

Пробовали? cover растягивает фон (пропорционально) так, чтобы весь элемент был заполнен, но часть фона может обрезаться (судя по описанию, Вам именно это и нужно)

Firefox 50.1.0, есть проблема
Разрешение 1920 x 1080

UPD Chrome 55.0.2883.87, проблемы нет

IMHO, но вряд ли кто-то не согласится

float любят все. Простите, не любят. Сколько уже было статей типа "У вас тоже не работает float?", "float и магия css", etc.

В основном float стоит использовать для обтекания: https://jsfiddle.net/Ivanq/xqd0hoy7/
Часто float используют для того, чтобы поставить в ряд: https://jsfiddle.net/Ivanq/xqd0hoy7/1/

Но такой код поддерживать невозможно. Стоит начать с того, что float: right работает не совсем так, как вы ожидаете. Этот код поставит сначала 3 элемент, потом 2, потом 1.

Сейчас лучше использовать inline-block, он поддерживается всеми нормальными браузерами.
https://jsfiddle.net/Ivanq/xqd0hoy7/3/ также выравнивает в ряд, но с помощью inline-block. Разумеется, у inline-block тоже есть подводные камни, но в любом случае float лучше не использовать.

Это IMHO.

Немного извращенства: https://jsfiddle.net/Ivanq/8Lvpyjd1/

Вы скажите точнее, как нужно. У меня 3 варианта:

1. background-size: contain
Картинка показывается целиком, не искажаясь.
Пример

2. background-size: cover
Картинка заполняет все пространство, не искажаясь, но часть обрезается.
Пример

3. background-size: 100% 100%
Картинка заполняет все пространство, но искажается.
Пример

Примерно так? https://jsfiddle.net/Ivanq/32s69413/