Bootstrap сетка, отображающая столбец вне строки на маленьком экране - PullRequest
Новая
       54

Bootstrap сетка, отображающая столбец вне строки на маленьком экране

0 голосов
/ 25 апреля 2020

Как я могу отобразить мой 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>

Ответы [ 2 ]

0 голосов
/ 25 апреля 2020

, если вы не можете изменить структуру, единственное решение, о котором я могу подумать: 

<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>
0 голосов
/ 25 апреля 2020

Поместите их в одно и то же .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.com/p/m8sgEDDmp2

...