I am building a bootstrap component to drop into a clients site. They are still using Bootstrap 4.3. Bootstrap is supposed to be mobile first but when I inspect my dev site, it is calling the .col-md class instead of .col-6 class that I have first. See code examples. Here is the link to my dev site. When I inspect and choose device view, it doesn’t collapse and stack like it’s supposed to.

HTML:

<div class="row selectors d-flex justify-content-space-between" id="rc-button-bar">
        <div class="col-6 col-md mb-2">
          <button id="btn-25" class="btn-primary ce-button" data-value="25">25%</button>
        </div>
        <div class="col-6 col-md mb-2">
           <button id="btn-50" class="btn-primary ce-button" data-value="50">50%</button>
          </div>
        <div class="col-6 col-md mb-2">
            <button id="btn-85" class="btn-primary ce-button is-active" data-value="85">85%</button>
          </div>
        <div class="col-6 col-md mb-2">
            <button id="btn-100" class="btn-primary ce-button" data-value="100">100%</button>
          </div>
        <div class="col-sm mb-2 d-flex align-items-center">
          <input id="customPercent" class="numbers" type="text" placeholder="ex: 80"></input> <span class="boldtxt">%</span>
        </div>
      </div>

The buttons should be 6 columns each on mobile, then once it gets to medium size (768px)they should just space out evenly, but they don’t.

if you inspect the site https://aquamarine-selkie-cff40e.netlify.app/ you can see that I have my style sheets in correct order, my scripts in correct order, and my columns built right (at least I think so). Any help is much appreciated.