Bootstrap: элементы столбцов переполняются в других столбцах

Question

У меня проблема с использованием строки class=justify-content-md-center с 3 столбцами внутри. Столбцы class='col-auto. По какой-то причине, когда у меня есть еще несколько элементов в одном из столбцов, он переполняется в других столбцах, а не красиво. Вот код из консоли.

<div class="justify-content-md-center row">
    <div class="col-md-auto">
        <div class="childAdd addElement elRow" id="i325487081">+</div>
    </div>
    <div class="col-md-auto">
        <div class="popElements popPos elRow" draggable="true"><span>Condition</span>
            <div class="deleteB">X</div>
        </div>
        <div class="justify-content-md-center row">
            <div class="col-md-auto">
                <div class="childAdd addElement elRow" id="i348888406">+</div>
            </div>
            <div class="col-md-auto">
                <div class="childAdd addElement elRow" id="i604066558">+</div>
            </div>
            <div class="col-md-auto">
                <div class="popElements popPos elRow" draggable="true"><span>Sender</span>
                    <div class="deleteB">X</div>
                </div>
                <div class="justify-content-md-center row">
                    <div class="col-md-auto">
                        <div class="childAdd addElement elRow" id="i706392105">+</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-auto">
        <div class="childAdd addElement elRow" id="i442852183">+</div>
    </div>
</div>

А вот рисунок для кода выше. Обратите внимание, что это код для строки, содержащей 3 столбца, которые не расположены должным образом.