Html 强制列在特定窗口宽度范围内采用全宽

我正在使用该框架，目前具有以下结构，一行中有3个内容列：

<div class="container">
<div class="section">
    <div class="row">
        <div class="col s12 m4"> <!-- 1st column -->
            <div class="icon-block z-depth-2">
                <h2 class="center red-text"><i class="mdi-action-description"></i></h2>
                <h5 class="center">Content Title 1</h5>
                <p class="light"> content Text 1 </p>
            </div>
        </div>  <!-- 1st column  end -->

        <div class="col s12 m4"> <!-- 2nd column -->
            <div class="icon-block z-depth-2">
                <h2 class="center red-text"><i class="mdi-action-settings"></i></h2>
                <h5 class="center">Content Title 2</h5>
                <p class="light"> content Text 2 </p>
            </div>
        </div>  <!-- 2nd column end -->

        <div class="col s12 m4"> <!-- 3rd column -->
            <div class="icon-block z-depth-2">
                 <h2 class="center red-text"><i class="mdi-action-help"></i></h2>
                <h5 class="center">Content Title 3</h5>
                <p class="light"> content Text 3 </p>
            </div>
        </div>  <!-- 3rd column end -->
    </div>  <!-- row end -->
  </div>  <!-- section end -->
</div> <!-- container end -->

内容标题1
内容文本1

内容标题2
内容文本2

内容标题3
内容文本3

在四处试验时，我发现当窗口宽度小于等于587px时，这些列开始在桌面设备上相互排列（垂直布局），但我猜这些可能是（很可能是）某些百分比值。通过搜索相关类并查看它们的属性，我无法在

materialiecss

代码中找到任何相关内容

---

问题是：如何修改这些列开始垂直堆叠的宽度？

只需覆盖

min width

属性。但我会创建一个自定义类，然后重写它。下面是您当前代码的示例

@media only screen and (min-width: 320px) {
  .row .col.m4 {
    width: 33.33333%;
    margin-left: 0;
  }
}

---

只需覆盖

min width

属性即可。但我会创建一个自定义类，然后重写它。下面是您当前代码的示例

@media only screen and (min-width: 320px) {
  .row .col.m4 {
    width: 33.33333%;
    margin-left: 0;
  }
}

---

物化提供

sass

，因此如果您知道如何使用它，您可以轻松修改这些值

查看

sass/components/\u grid.scss文件中的以下代码片段
它负责网格的
css
（因此也负责
容器的宽度
、
列
、
行
、
sX
等元素）：

您只需根据需要更改值并将其“编译”为css。
具体化提供
sass
，因此如果您知道如何使用它，您可以轻松修改这些值

查看
sass/components/\u grid.scss文件中的以下代码片段
它负责网格的
css
（因此也负责
容器的宽度
、
列
、
行
、
sX
等元素）：

您只需根据需要更改值并将其“编译”为css。
好吧，我需要说的是“从XXX的窗口宽度开始，列应垂直堆叠，每列应取其
最大宽度
”。声明
min width
会导致（例如）两列相邻，下一列。签出我的更新。从这里起作用。不是下面的2列+1。接受，因为你让我想到了正确的方向，谢谢。最后，我使用了
@纯媒体屏幕和（最小宽度：250px）和（最大宽度：1600px）
并将
.row.col.m4
宽度设置为100%，这迫使列占据整个容器的宽度，而其他列则位于其下方，大小为250到1600pxOh。您可以将该问题重新定义为“强制列在特定浏览器大小内占据全部宽度”。对我和另一个回答者来说很简单：）哦，好吧。。我最初的问题如前所述，但你的回答让我明白，我实际上必须让它占据全部空间，以实现我所需要的；）好的，我需要说的是“从XXX的窗口宽度开始，列应该垂直堆叠，每列应该取其
最大宽度
”。声明
min width
会导致（例如）两列相邻，下一列。签出我的更新。从这里起作用。不是下面的2列+1。接受，因为你让我想到了正确的方向，谢谢。最后，我使用了
@纯媒体屏幕和（最小宽度：250px）和（最大宽度：1600px）
并将
.row.col.m4
宽度设置为100%，这迫使列占据整个容器的宽度，而其他列则位于其下方，大小为250到1600pxOh。您可以将该问题重新定义为“强制列在特定浏览器大小内占据全部宽度”。对我和另一个回答者来说很简单：）哦，好吧。。我最初的问题如前所述，但你的回答让我明白，我实际上必须让它占据全部空间，以实现我所需要的；）我不熟悉这一点，所以我正在寻找解决问题的css/js解决方案。我不熟悉这一点，所以我正在寻找解决问题的css/js解决方案
// Media Query Ranges
$small-screen-up: 601px !default;
$medium-screen-up: 993px !default;
$large-screen-up: 1201px !default;
$small-screen: 600px !default;
$medium-screen: 992px !default;
$large-screen: 1200px !default;