title: Bootstrap 4 ordering classes not working?
body: <p>I am trying to reorder my columns when the screen size is small(sm) using Bootstrap 4. But instead, they are being reordered on a large screen size and remain in original position on small screens. </p>
  
  <p>Current code: </p>
  
  <pre><code>    &lt;div class="container"&gt;
                      &lt;div class="row project-container" id="project1"&gt;
                         &lt;div class="col-md-5 offset-md-1 order-sm-12"&gt;
                              &lt;div class="project-description"&gt;
                                  &lt;h2&gt;Meteor Shower&lt;/h2&gt;
                                  &lt;span&gt;Video Game,Unity Game Engine&lt;/span&gt;
                                  &lt;p&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum 
                                  Lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, numquam. dolor sit, amet consectetur adipisicing elit. Sint, quidem.voluptates aut atque obcaecati unde. Repellendus eligendi soluta tempore similique sunt?&lt;/p&gt;
                                  &lt;div class="visit-website"&gt;Visit Website&lt;/div&gt;
                              &lt;/div&gt;
                         &lt;/div&gt;
                         &lt;div class="col-md-5 video-container order-sm-1" &gt;
                             &lt;div class="videoWrapper"&gt;
                              &lt;iframe width="560" height="315" src="https://www.youtube.com/embed/DzFfqFzir2o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;
                             &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>