Why my SASS project is disregarding media breakpoints? - reactjs

Question

I used to use CSS for a React project, but for the implementation of a "dark mode" functionality I decided to move to SASS.
I also use bootstrap so I organize my files according to the documentation.
/* App.scss */
#import "~bootstrap/scss/bootstrap.scss";
#import './styles/_themes';
#import './styles/_fonts';
h1, h2, h3, h4, h5, h6 {
font-family: $font-family-secondary;
#include themed() {
color: t($title-color)
}
}
p {
font-family: $font-family-primary;
#include themed() {
color: t($text-color)
}
}
hr, .nav-tabs {
#include themed() {
border-color: t($text-secondary-color)
}
}
.base {
height: 100%;
width: 100%;
#include themed() {
background-color: t($background-color)
}
}
.main {
width: 750px;
#include themed() {
background-color: t($background-color)
}
}
First, I thought it was a bootstrap problem, but the breakpoints are also being disregarding in my own files.
/* Footer.scss */
#media (max-width: 767px){
#footer h5 {
padding-left: 0;
border-left: transparent;
padding-bottom: 0px;
margin-bottom: 10px;
}
}
I made a minimal reproducible example and posted it to codesandbox: https://codesandbox.io/s/immutable-fire-qu9oe
Please, try to decrease the screen size and check the media breakpoints being disregarded.
What am I doing wrong?
Thank you very much!
EDIT:
Thanks to robertp's answer I could fix my custom media breakpoints.
But how can I fix bootstrap ones?
For example, in my navbar I have a media breakpoint for a bootstrap class:
/* Navbar.scss */
#media (max-width: 571px) {
.collapsing {
#include themed() {
position: absolute !important;
z-index: 3;
width: 100%;
top: 75px;
}
}
.collapse.show {
#include themed() {
display: block;
position: absolute;
z-index: 3;
width: 100%;
top: 75px;
}
}
.navbar.open {
#include themed() {
transform: translate(0, 0)
}
}
.overlay.open {
#include themed() {
height: 100%;
opacity: 1;
}
}
}
But it didn't work. Also, how I could fix all bootstrap grid system classes?
EDIT 2:
The problem was the import order. If I put the bootstrap import at the end of the file everythings works as expected!

Answer 1

It seems to be due to specificity in the theme. Your footer H5 element is styled as per the theme, so you need to override the themed version of it.
Screenshot of the themed styling overriding your mediaquery based styling:
This should work:
#media (max-width: 767px){
#footer h5 {
#include themed() {
padding-left: 0;
border-left: transparent;
padding-bottom: 0px;
margin-bottom: 10px;
}
}
}