bootstrap 的 visible-*，hidden-*属性在react项目中无法使用

最近在做一个react相关的项目，导入了相关的bootstrap包。想实现小屏幕自动隐藏一些组件的功能；将菜鸟教程里面的实例稍微修改，但是发现_visible-*_，_hidden-*_属性不起作用。
下面是代码和不同大小屏幕的显示。
代码：

大屏幕结果：

小屏幕结果：

https://www.cnblogs.com/ssdtor/p/10148231.html