显示两个div彼此相邻，然后一个在其他div下面，具有两个不同的SCSS文件

Question

我有这个HTML:

<div className="tab-header">
<div className="container-header-comp">
<div className="header-comp">some-text</div>
</div>
<div className="header-options">
<div className="header-options-text">some-text</div>
</div>
</div>

相当简单。我有两个SCSS文件，一个为我的应用程序(页面)的两个响应式设计。SCSS和page-responsive.scss)

我想显示"container-header-comp"one_answers";header-options"一个挨着一个，所以是我的页。SCSS看起来像这样(并且工作得很好):

.tab-header {
display: grid;
grid-template-columns: 1fr 1fr;
}

现在，如果我想显示相同的类，但不是彼此相邻，而是希望它们一个在另一个下面，以便我的响应式设计。在页面响应中。我简单地这样做了:

.tab-header{
grid-template-columns : 1fr;
}

由于它在另一个文件中，该样式不会应用于我的类(除非我应用了!important，而我不想这样做)。我如何用我的两个scss文件实现这个技巧?

Answer 1

try with

@media only screen and (max-width: 600px) {
{
....
}
}