Встроенный CSS не соблюдает свойства @media min-width и max-width

Я создаю страницу ценообразования в моем приложении Django, которая имеет 3 колонки. Если размер экрана больше 768 пикселей, я хочу, чтобы все 3 колонки отображались рядом. Но если он меньше 768 пикселей, я хочу, чтобы была только 1 колонка с различными вариантами цен друг над другом.

По какой-то причине свойства @media не соблюдаются. Не имеет значения размер экрана, на странице всегда отображается 3 колонки. На приведенном ниже снимке экрана должна быть только 1 колонка (как на большинстве страниц, дружественных к мобильным устройствам)

Текущая страница:

Js Fiddle - LINK. Странно то, что в этом JS Fiddle, кажется, что он действительно следует свойствам @media screen and (max-width).

Код:

<meta content="width=device-width, initial-scale=1" name="viewport" />