Force a column to take full width within a specific window width range

Question

I'm using the MaterializeCSS framework and currently have the following structure with 3 content columns inside a row:

<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 -->

While experimenting around I found out that those columns start to order themselves under each other (vertical layout) on a desktop device when the window width is 587px or less, but I guess those might be (and likely are) some percent values. I was unable to find anything related in the materializecss code by searching for related classes and viewing their attributes.

The question: how can I modify the width from which those columns start to stack vertically?

Answer 1

Just override the min-width attribute. But I would create a custom class and then override it. Below is an example for your current code.

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

JSfiddle