Bootstrap: Move Div From One Column To Another, Order Counts For Mobile Devices

Question

block1 with IDs and classes

block2 with IDs and classes

&

Solution 1:

No need to use push/pull. Just think "mobile-first"..

 <div class="row">
        <div class="col-lg-7">
            <div>block1</div>
        </div>
        <div class="col-lg-5">
            <div>block3</div>
        </div>
        <div class="col-lg-7">
            <div>block2</div>
        </div>
 </div>

http://www.codeply.com/go/jgvSJrMOnk

In the case where block 3 is taller than the other columns, create a special class to float it to the right on large screens..

@media (min-width:1200px) {
    .pull-lg-right {
      float:right;
    }
}

Related:
How do I change Bootstrap 3 div column order
Bootstrap with different order on mobile version (Bootstrap 4)

Baca Juga

Solution 2:

using push and pull properties of grid will do your work try this the push and pull will be only applied for small device

    <div class="row">
        <div class="col-lg-3">block1 with IDs and classes</div>
        <div class="col-lg-3 col-sm-push-12">block2 with IDs and classes</div>
        <div class="clearfix visible-lg-block"></div>
        <div class="col-lg-6 col-sm-pull-12">block3 with IDs and classes</div>
    </div>

Edit clearfix added for large device

Html5 Coding

Bootstrap: Move Div From One Column To Another, Order Counts For Mobile Devices

Solution 1:

Solution 2:

Post a Comment for "Bootstrap: Move Div From One Column To Another, Order Counts For Mobile Devices"