title: bootstrap change flex direction at certain breakpoints?
body: <p>i'm using bootstrap 4, i have a div that got d-flex and it's supposed to display direction row at the &quot;lg&quot; (screens 1200px and greater) breakpoint and when it's used on a mobile phone &quot;sm&quot; or &quot;xs&quot; breakpoint would be used and it would display direction column and behave like a column, but no matter how i try it, it just stays a row all the time</p>
  <p>i tried</p>
  <pre><code>&lt;div class=&quot;d-flex flex-sm-column flex-lg-row justify-content-lg-around&quot;&gt;
  </code></pre>
  <p>and</p>
  <pre><code>&lt;div class=&quot;d-flex flex-xs-column flex-lg-row justify-content-lg-around&quot;&gt;
  </code></pre>
  <p>but it doesn't work..am i misunderstanding the breakpoint system or something? i mean i would do the same using the CSS media queries.</p>
  <p>here is the full code</p>
  <pre><code>&lt;div class=&quot;w-75 my-5 mx-auto&quot;&gt;
                  &lt;h1 class=&quot; text-center my-3&quot;&gt;Awards won&lt;/h1&gt;
  
                  &lt;div class=&quot;d-flex flex-sm-column flex-lg-row justify-content-lg-around&quot;&gt;
                      
                      &lt;div class=&quot;d-flex flex-column col-sm-4 align-items-center&quot;&gt;
                          &lt;img src=&quot;./assets/award1.PNG&quot; width=&quot;150&quot; height=&quot;150&quot; class=&quot;award-img&quot;&gt;
                          &lt;span&gt; Award title &lt;/span&gt;
                          &lt;hr class=&quot;bg-dark w-50 m-0&quot;/&gt;
                          &lt;span class=&quot;w-75 text-center text-break&quot;&gt;Best cake made in 2019&lt;/span&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;d-flex flex-column col-sm-4 align-items-center&quot;&gt;
                          &lt;img src=&quot;./assets/award2.PNG&quot; width=&quot;150&quot; height=&quot;150&quot; class=&quot;award-img&quot;&gt;
                          &lt;span&gt; Award title &lt;/span&gt;
                          &lt;hr class=&quot;bg-dark w-50 m-0&quot;/&gt;
                          &lt;span class=&quot;w-75 text-center text-break&quot;&gt;Winners of the national cake baking contest&lt;/span&gt;
                      &lt;/div&gt;
  
                      &lt;div class=&quot;d-flex flex-column col-sm-4 align-items-center&quot;&gt;
                          &lt;img src=&quot;./assets/award3.PNG&quot; width=&quot;150&quot; height=&quot;150&quot; class=&quot;award-img&quot;&gt;
                          &lt;span&gt; Award title &lt;/span&gt;
                          &lt;hr class=&quot;bg-dark w-50 m-0&quot;/&gt;
                          &lt;span class=&quot;w-75 text-center text-break&quot;&gt;Most satisfied customers award&lt;/span&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>