Why are my checkboxes misaligning on mobile?

I have a couple of checkboxes with the following markup:

<form>
    <div class="form-group">
        <div class="row">
            <div class="form-check">
                <input type="checkbox" class="form-check-input col-md-3" id="updates">
                <label class="form-check-label col-md-9 text-left" for="updates"><small>Want to receive updates.</small></label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="row">
            <div class="form-check">
                <input type="checkbox" class="form-check-input col-md-3" id="customer">
                <label class="form-check-label col-md-9 text-left" for="customer"><small>I want to subscribe</small></label>
            </div>
        </div>
    </div>
</form>

They work just fine. The only issue is that while on desktop they look well, starting from tablet and onward they begin to push towards the middle of the field so that when they are seen in mobile, the checkbox is dead-center (under the text). Still clickable but no idea why this is happening.

I'm using bootstrap 4 and jquery 3.3.1.