Как расположить div под другим div

Question

Так что я использую систему сетки начальной загрузки, и в верхнем ряду у меня есть три div с сеткой 3 & 6 & 3

Левый div (3) используется для ссылок, поэтому высота может время от времени меняйте центр div (6), оставаясь неизменным, и правильный div (3) также может изменяться время от времени.

Проблема, с которой я сталкиваюсь, заключается в том, что я пытаюсь добавить другой div из (6) под оригинальным div (6), он остается ниже другого div (3) в центре. Я не могу заставить его сидеть под этим div (6)?

    <div class="row justify-content-left">
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">Left</div>

                <div class="card-body">
                    <p> Link </p>
                    <p> Link </p>
                    <p> Link </p>
                    <p> Link </p>
                    <p> Link </p>
                    <p> Link </p>
                    <p> Link </p>
                    <p> Link </p>

            </div>
        </div>     </div>



        <div class="col-md-6">
            <div class="card">
                <div class="card-header">Center</div>

                <div class="card-body">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" placeholder="Website URL" aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button">Submit</button>
                        </div>
                    </div>

                </div>
            </div></div>


<div class="col-md-3">
    <div class="card">
        <div class="card-header">Right</div>

        <div class="card-body">
            <p> Link </p>
            <p> Link </p>
            <p> Link </p>
            <p> Link </p>
            <p> Link </p>
            <p> Link </p>
            <p> Link </p>
            <p> Link </p>

        </div>
    </div>
</div>
    </div>


<div class="row justify-content-center">

    <div class="col-md-6">.
            <div class="card">
            <div class="card-header">Underneath Center</div>

            <div class="card-body">
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>

            </div>
        </div>    </div>
        </div></div> ```

Answer 1

Предполагается, что вы используете Bootstrap 4.

Возможно, вам потребуется более детально указать ваш вариант использования, но вы можете попробовать просто разместить дополнительный контент в своем центре (.col-6) колонка?

<div class="row justify-content-left">

    <div class="col-md-3">
        <div class="card">
            <div class="card-header">Left</div>
            <div class="card-body">
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
            </div>
        </div>
    </div>

    <div class="col-md-6">
        <div class="card">
            <div class="card-header">Center</div>
            <div class="card-body">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" placeholder="Website URL" aria-label="Recipient's username" aria-describedby="basic-addon2">
                    <div class="input-group-append">
                        <button class="btn btn-outline-secondary" type="button">Submit</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="card mt-5">
            <div class="card-header">More Content in Center</div>
            <div class="card-body">
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-header">Right</div>
            <div class="card-body">
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
                <p> Link </p>
            </div>
        </div>
    </div>

</div>