Bootstrap 4中的响应断点

Question

我知道，在Bootstrap 4中有一些关于响应断点的现有帖子，但不幸的是我无法让它们在我的项目中工作 - 即使我彻底研究了其他帖子。

我的HTML：现在，为了让它运行，我开始用一个非常简单的例子：

<div class="testClass">Test</div>

我个人的CSS文件：

.testClass {
width: 100%;
height: 200px;
background: blue;
margin-bottom: 3%;
color: white;
@include media-breakpoint-up(sm) { 
    font-size: 10px;
}
@include media-breakpoint-up(md) { 
    font-size: 20px;
}}

我使用极端字体大小来查看差异。因为我现在尝试缩小我的浏览器窗口（我可以看到我的页面上的其他引导元素上有引导断点）此div中的字体大小保持不变。有什么我必须包括才能使它工作或我必须在bootstrap CSS文件而不是我的个人CSS文件中做一些更改？