title: Bootsrap 5 Getting DIV's (Cols) to Align Start (Stack) on Small Devices and Justify (Inline) on Large Devices within the Navbar?
body: <p>I'm trying to upgrade to <strong>Bootstrap 5</strong> as it has some great new features, but I am struggling with the responsive aspects and justifying.</p>
  <p>I have a design with <strong>7 columns</strong> that should be evenly spaced on desktop, which works fine.</p>
  <p><a href="https://i.stack.imgur.com/Vm7SA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Vm7SA.png" alt="enter image description here" /></a></p>
  <p>However, with switching to mobile the <strong>d-flex</strong> or <strong>justify</strong> seems to override the normal <strong>col</strong> stacking feature.</p>
  <p><a href="https://i.stack.imgur.com/zmeBi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zmeBi.png" alt="enter image description here" /></a></p>
  <p>What I am trying to achieve is this...</p>
  <p><a href="https://i.stack.imgur.com/rBgkd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rBgkd.png" alt="enter image description here" /></a></p>
  <p>This is to be an icon style navigation bar and the source code so far is:</p>
  <pre><code>&lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbar_main&quot; style=&quot;width:100%;&quot;&gt;
  
  &lt;div class=&quot;container&quot;&gt;
  &lt;div class=&quot;row d-lg-flex justify-content-lg-evenly align-items-start&quot;&gt;
    
    &lt;div class=&quot;col text-center&quot;&gt;&lt;span class=&quot;fab-icon&quot;&gt;Ex&lt;/span&gt; &lt;span class=&quot;fab-text&quot;&gt;Example&lt;/span&gt;&lt;/div&gt;
    &lt;div class=&quot;col text-center&quot;&gt;&lt;span class=&quot;fab-icon&quot;&gt;Ex&lt;/span&gt; &lt;span class=&quot;fab-text&quot;&gt;Example&lt;/span&gt;&lt;/div&gt;
    &lt;div class=&quot;col text-center&quot;&gt;&lt;span class=&quot;fab-icon&quot;&gt;Ex&lt;/span&gt; &lt;span class=&quot;fab-text&quot;&gt;Example&lt;/span&gt;&lt;/div&gt;
    &lt;div class=&quot;col text-center&quot;&gt;&lt;span class=&quot;fab-icon&quot;&gt;Ex&lt;/span&gt; &lt;span class=&quot;fab-text&quot;&gt;Example&lt;/span&gt;&lt;/div&gt;
    &lt;div class=&quot;col text-center&quot;&gt;&lt;span class=&quot;fab-icon&quot;&gt;Ex&lt;/span&gt; &lt;span class=&quot;fab-text&quot;&gt;Example&lt;/span&gt;&lt;/div&gt;
    &lt;div class=&quot;col text-center&quot;&gt;&lt;span class=&quot;fab-icon&quot;&gt;Ex&lt;/span&gt; &lt;span class=&quot;fab-text&quot;&gt;Example&lt;/span&gt;&lt;/div&gt;
    &lt;div class=&quot;col text-center&quot;&gt;&lt;span class=&quot;fab-icon&quot;&gt;Ex&lt;/span&gt; &lt;span class=&quot;fab-text&quot;&gt;Example&lt;/span&gt;&lt;/div&gt;
    
  &lt;/div&gt;
  </code></pre>
  
  
  <p>I have tried everything I can think of and been through all the Bootstrap V5 documentation. My guess is, that I am trying to achieve something Bootstrap can't do or I am missing a key item.</p>
  <p>If I set to &quot;justify&quot; on all devices, then they don't stack at all. &quot;align-items-start&quot; (and &quot;align-this-start&quot; on each DIV) made no difference.</p>
  <p>The only additional non default Bootstrap code used is two CSS styles, which simply style the icon and set text to white.</p>