在小屏幕上显示列外行的Bootstrap网格。

Question

我怎样才能显示我的 Hello-div-2 之后 Hello-div-3 在小屏幕上，现在的流程是

Hello-div-1, Hello-div-2, Hello-div-3, Hello-div-4。.

应该是

Hello-div-1，Hello-div-3，Hello-div-2，Hello-div-4。

<div class="container">
    <div class="row">
        <div class="col-md-8 col-12 bg-primary">
            <h2 class="font-weight-light">Hello-div-1</h2>
        </div>
         <div class="col-md-4 col-12 bg-success">
            <h2 class="font-weight-light ">Hello-div-2</h2>
        </div>
    </div>
     <div class="row">
         <div class="col-md-8 col-12 bg-info">
            <h2 class="font-weight-light">Hello-div-3</h2>
        </div>
         <div class="col-md-4 col-12 bg-warning">
            <h2 class="font-weight-light">Hello-div-4</h2>
        </div>
    </div>
</div>

Answer 1

如果你不能改变结构，我唯一能想到的解决方法是

<div class="container">
    <div class="row">
        <div class="col-md-8 col-12 bg-primary">
            <h2 class="font-weight-light">Hello-div-1</h2>
        </div>
         <!-- hide this in small screen -->
         <div class="col-md-4 col-12 bg-success">
            <h2 class="font-weight-light ">Hello-div-2</h2>
        </div>
    </div>
     <div class="row">
         <div class="col-md-8 col-12 bg-info">
            <h2 class="font-weight-light">Hello-div-3</h2>
        </div>
        <!-- show this in small screen -->
         <div class="col-md-4 col-12 bg-success">
            <h2 class="font-weight-light ">Hello-div-2</h2>
        </div>
         <div class="col-md-4 col-12 bg-warning">
            <h2 class="font-weight-light">Hello-div-4</h2>
        </div>
    </div>
</div>

Answer 2

把他们都放在同一个地方 .row 并使用 .order- 类...

<div class="container">
    <div class="row">
        <div class="col-md-8 col-12 bg-primary order-0 order-md-0">
            <h2 class="font-weight-light">Hello-div-1</h2>
        </div>
        <div class="col-md-4 col-12 bg-success order-2 order-md-0">
            <h2 class="font-weight-light ">Hello-div-2</h2>
        </div>
        <div class="col-md-8 col-12 bg-info order-1 order-md-0">
            <h2 class="font-weight-light">Hello-div-3</h2>
        </div>
        <div class="col-md-4 col-12 bg-warning order-3 order-md-0">
            <h2 class="font-weight-light">Hello-div-4</h2>
        </div>
    </div>
</div>

https:/codeply.comm8sgEDDmp2