html - Bootstrap 4 col 排序移动与桌面

Question

我想在移动设备上归档以下列顺序： 以及桌面上的列顺序：

使用此 HTML：

    <div class="row portitems">

        <div class="col-4 col-md-3 portcol">
            <img src="images/portfolio/thumb_1.jpg" class="img-fluid" alt="Titel" />
        </div>

        <div class="col-4 col-md-3 portcol">
            <img src="images/portfolio/thumb_2.jpg" class="img-fluid" alt="Titel" />
        </div>

        <div class="col-4 col-md-3 portcol">
            <img src="images/portfolio/thumb_3.jpg" class="img-fluid" alt="Titel" />
        </div>

        <div class="col-4 col-md-3 portcol">
            <img src="images/portfolio/thumb_4.jpg" class="img-fluid" alt="Titel" />
        </div>

        <div class="col-4 col-md-3 portcol">
            <img src="images/portfolio/thumb_4.jpg" class="img-fluid" alt="Titel" />
        </div>

        <div class="col-4 col-md-3 portcol">
            <img src="images/portfolio/thumb_4.jpg" class="img-fluid" alt="Titel" />
        </div>

        <div class="col-12 portcol promocol col-md-pull-2">
            <div class="innerpromo">
                <h2>Need an experienced stylist?</h2>
                <a href="#" class="mybtn white"><svg><use xlink:href="#icon-chevron-right" /></svg> Contact me</a>
            </div>
        </div>

        <div class="col-4 col-md-3 portcol">
            <img src="images/portfolio/thumb_1.jpg" class="img-fluid" alt="Titel" />
        </div>

        <div class="col-4 col-md-3 portcol">
            <img src="images/portfolio/thumb_2.jpg" class="img-fluid" alt="Titel" />
        </div>

        <div class="col-4 col-md-3 portcol">
            <img src="images/portfolio/thumb_3.jpg" class="img-fluid" alt="Titel" />
        </div>

        <div class="col-4 col-md-3 portcol">
            <img src="images/portfolio/thumb_4.jpg" class="img-fluid" alt="Titel" />
        </div>

        <div class="col-4 col-md-3 portcol">
            <img src="images/portfolio/thumb_4.jpg" class="img-fluid" alt="Titel" />
        </div>

        <div class="col-4 col-md-3 portcol">
            <img src="images/portfolio/thumb_4.jpg" class="img-fluid" alt="Titel" />
        </div>

    </div>

移动显示很好，但在桌面上我得到 4 cols, 2 cols, 1 full width col, 4 cols

有谁知道如何在桌面上进行正确排序？

标签： htmlcsstwitter-bootstrap