Alexander Sydorenko

У вас в html коде есть такая строчка

<span class="livicon" data-name="wrench" data-duration="600" id="livicon-1" style="width: 32px; height: 32px;">

Вот атрибут data-duration и есть продолжительность анимации в миллисекундах. Увеличьте до 2000 например.

И да, js код трогать не надо.

для 2 блока z-index:0; (минимальный)
для 1 блока z-index:1; (больше)
для 3 блока z-index:2; (еще чуть больше, при условии что выше наклонной линии у бекграунда прозрачность)
для 4 блока z-index:3; (максимальный, при условии что блок 4-е только рамка, и бекграунд у него прозрачный)

z-index работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Верстать действительно надо на блоках. Но меня больше волнует другой вопрос.. Пример информации которую разумно так представлять?

Представим возможные данные:
Фамилия Имя Отчество Адрес

Два столбца
Фамилия Имя
Отчество Адрес

Один
Фамилия
Имя
Отчество
Адрес

ИМХО строка таблицы это логически завершенная сущность. Целостная и неделимая..

А по поводу отзывчивости табличных данных можно почитать здесь

Никогда не беру предоплату. И пока на заказчиков везло. Проблем не возникало.

Наверное у каждого по разному, но я получаю дополнительное моральное удовольствия от оплаты за результат, а не от чувства, что я взял деньги, и теперь кому-то, что-то должен.

Ну раз таблица не годится(хм..)
тогда с использованием адаптивной сетки того же бустрапа, думаю можно добиться желаемого результата.

на вскидку так jsfiddle.net/9n86wy26/2 (уменьшайте экран, единственное что для .left, .right надо добавить пару медиа-запросов, чтобы они выравнивание и отступы делали только на экранах больше 768px)

Этот класс растянет картинку на всю ширину блока, и автоматически построит ее высоту.

.img-reponsive {
display:block;
width:100%;
max-width:100%;
height:auto;
}

ну и похожий класс описать для варианта 100% hegit и width:auto;

1. Вы используете бутстрап, там этот код уже есть (написанный в этом примере), удалите его из своих стилей, в Ашем случае достаточно просто к картинке добавить img-responsive.
2. Если надо ограничить по высоте, то можно сделать например так:

<div class="img-block">
    <img class="img-responsive" src="assets/img/636889-1366x768(1).jpg">
</div>

ну и

.img-block {
    height: 200px;
    overflow: hidden;
}