css class causes show/hide conditions to fail

less than 5

exactly 5

greater than 5

less than 5

exactly 5

greater than 5

less than 5

exactly 5

greater than 5

Selecting a number will demonstrate conditional show/hide  attributes applied to three paragraphs

The paragraphs in both green and blue sections have the same show/hide conditions. The only difference between the two is that those in the blue one have a class applied.

Conditions work correctly.

There are three paragraphs in this column. Only one shows at a time, according to the value of the number field.

Conditions don't work.

CSS  class= "d-sm-none d-md-block" is applied to each paragraph and works as expected: the text is not displayed on smaller devices (it will disappear if the window size is made small). 

Why does this affect the show/hide  attributes? 

Ben