Bootstrap 4 Float-Right не работает при разрыве строки

Question

Это код:

    <div class="container">
    <div class="w-100 row">
        <div class="d-none d-md-block col-md-1"></div>
        <div class="col-md-10 row">
            <div class="col-md-3  border">
                <span class="float-md-right">Float right
                </span>
            </div>

            <div class="col-md-3 border">
                Align to left
            </div>

            <div class="col-md-3  border">
                <span class="float-right">Float right
                </span>
            </div>

            <div class="col-md-3 border">
                Align to left
            </div>

            <div class="col-md-3  border">
                <span class="float-right h3">Not floating rightside:
                </span>
            </div>
            <div class="col-md-3 border">
                Align to left
            </div>
        <div class="d-none d-md-block col-md-1"></div>
        </div>
        </div>

См. Этот пример здесь: https://jsfiddle.net/4p81h0mo/

Просмотрите его на большом экране.

Во второй строке есть ячейка с текстом, который переносится на новую строку, но пространство после первой строки зарезервировано, поэтому она не перемещается вправо.

Я также пробовал d-flex + ml-auto, который работает только при отсутствии разрыва строки.