Как вывести элементы в вертикальном порядке?

Question

Использую Bootstrap 5.

Вывожу список автомобилей вот так:

<div class="row">
    цикл {
        <div class="col-6 col-lg-3 mb-3">
             $name
        </div>
    }
</div>

В итоге получается вот такой порядок:

А я хочу сделать чтобы второй авто был под первым и тд, то есть чтобы по вертикали сортировало.

Буду благодарен за помощь!

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

<div class="row" id="all_ch_makes">
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[21]" value="1" type="checkbox" id="gridCheck1_21">
            <label class="form-check-label" for="gridCheck1_21">Acura</label>
        </div>
    </div>
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[22]" value="1" type="checkbox" id="gridCheck1_22">
            <label class="form-check-label" for="gridCheck1_22">Alfa Romeo</label>
        </div>
    </div>
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[23]" value="1" type="checkbox" id="gridCheck1_23">
            <label class="form-check-label" for="gridCheck1_23">Alpina</label>
        </div>
    </div>
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[24]" value="1" type="checkbox" id="gridCheck1_24">
            <label class="form-check-label" for="gridCheck1_24">Aro</label>
        </div>
    </div>
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[25]" value="1" type="checkbox" id="gridCheck1_25">
            <label class="form-check-label" for="gridCheck1_25">Asia</label>
        </div>
    </div>
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[26]" value="1" type="checkbox" id="gridCheck1_26">
            <label class="form-check-label" for="gridCheck1_26">Aston Martin</label>
        </div>
    </div>
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[1]" value="1" type="checkbox" id="gridCheck1_1">
            <label class="form-check-label" for="gridCheck1_1">Audi</label>
        </div>
    </div>
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[27]" value="1" type="checkbox" id="gridCheck1_27">
            <label class="form-check-label" for="gridCheck1_27">Audi</label>
        </div>
    </div>
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[28]" value="1" type="checkbox" id="gridCheck1_28">
            <label class="form-check-label" for="gridCheck1_28">BAIC</label>
        </div>
    </div>
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[29]" value="1" type="checkbox" id="gridCheck1_29">
            <label class="form-check-label" for="gridCheck1_29">Bentley</label>
        </div>
    </div>
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[2]" value="1" type="checkbox" id="gridCheck1_2" checked="">
            <label class="form-check-label" for="gridCheck1_2">BMW</label>
        </div>
    </div>
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[30]" value="1" type="checkbox" id="gridCheck1_30">
            <label class="form-check-label" for="gridCheck1_30">Brilliance</label>
        </div>
    </div>
    <div class="col-6 col-lg-3 mb-3">
        <div class="form-check">
            <input class="form-check-input" name="makes[31]" value="1" type="checkbox" id="gridCheck1_31">
            <label class="form-check-label" for="gridCheck1_31">Buick</label>
        </div>
    </div>
</div>

БЛОГ НА HUSL

Как вывести элементы в вертикальном порядке?

Ответы (0 шт):