title: Materialize <div class="col s12 m6 l3"> not working
body: <p>All references to materialize classes work except for the columns. My HTML webpage is structured as follows:</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
  
      &lt;!-- Bootstrap reference --&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
      &lt;!--Import materialize.css--&gt;
      &lt;link type="text/css" rel="stylesheet" href="{% static 'css/materialize.css' %}"  media="screen,projection"/&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"&gt;&lt;/script&gt;     
  &lt;/head&gt;
  </code></pre>
  
  <p>My stylesheet import works because I use it to customize colors and other parts of my page. When I enter the page I see a section dedicated to the col class to which has sections like .row .col.s3 {...}.</p>
  
  <p>However, the browser does not recognize the columns when I call them like in the Materialize documentation, as such:</p>
  
  <pre><code>&lt;div class="container my-custom-container"&gt;
      &lt;div class="row flex"&gt;
          &lt;div class="col s12 m6 l3"&gt;
              ...
          &lt;/div&gt;
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It does not get recognized so everything is just 100% container width. My custom CSS for the container and row are:</p>
  
  <pre><code>.flex {
      display: flex;
      flex-wrap: wrap;
  }
  
  @media (min-width: 100px) {
      .my-custom-container{
          width:99%;
  }}
  </code></pre>
  
  <p>Could this be the issue? I don't know because I'm not a CSS expert. Can somebody please lend me a hand? Thanks!</p>