Почему код второго вида не попадает в тот же ряд row?

Переношу верстку на Битрикс. На странице каталога есть 2-ной способ представления товаров. В виде блоков и в виде списка.

Вот исходный шаблон страницы каталога (Смотрите страницу категории).

При верстке компонента продублировал вызов кода товаров и прописал соответствующее имя вызова.

Вот код страницы каталога на Битрикс

Переключение происходит через jquery

$('#list').click(function()

{

$('.grid').fadeOut()

$('.list').fadeIn()

});

Но почему то при переключении второй вариант смешается на нижний ряд, а не просто заменяет первоначальный вид.
Вот код из 3 файлов. https://yadi.sk/d/gIVlQ_0yiQ8SM

catalog.top.section.default.php - код компонента первоначального вида с корректным положением

catalog.top.section.top-list.php - код компонента с неправильной позицией

catalog.sections.php - код вызова 2 компонентов.          

Почему код второго вида не попадает в тот же ряд row?  Ведь в обоих случаях я использовал копию кода?