Making scalable columns with Materialize

Question

I have this form that has 3 columns. I want these columns to stack once the screen passes a certain width:

 <form id="shiftform" class="col s12 m12 l12">
      <div class="form-group col s0 m4 l4">
           {!! Form::label('shift_description',  trans('crud.shiftdescription'))!!}
           {!! Form::text('description', null, array('id'=> 'shift_description')) !!}
            {!!$errors->first('description', '<span class=error>:message</span>')!!}
      </div>
      <div class="form-group col s0 m4 l4">
           {!! Form::label('shift_starttime', trans('crud.shiftstarttime'))!!}
           {!! Form::text('starttime', null, array('id'=> 'shift_starttime')) !!}
           {!!$errors->first('starttime', '<span class=error>:message</span>')!!}
     </div>
     <div class="form-group col s0 m4 l4">
          {!! Form::label('shift_endtime', trans('crud.shiftendtime'))!!}
          {!! Form::text('endtime', null, array('id'=> 'shift_endtime')) !!}
          {!!$errors->first('endtime', '<span class=error>:message</span>')!!}
    </div>

  <input type="hidden" id="id" value="0">
</form>

The form looks like this on every screen size:

(1)----- (2)-------- (3)-------

Is there a way so it will become this

(1)------

(2)------

(3)------

when the screen becomes to small?

Answer 1

Your markup for the grid is incorrect. Use a row to include the columns. I don't think a class like s0 exists. Please read the docs: Materialize Grid

You can change your markup to:

<div class="row">
  <form id="shiftform" class="col s12 m12 l12">
    <div class="form-group col m4 l4">
      <img src="http://placehold.it/300x300" />
    </div>
    <div class="form-group col m4 l4">
      <img src="http://placehold.it/300x300" />
    </div>
    <div class="form-group col m4 l4">
      <img src="http://placehold.it/300x300" />
    </div>

    <input type="hidden" id="id" value="0" />
  </form>

JSfiddle