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

block1 with IDs and classes

block2 with IDs and classes

&

Solution 1:

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

<divclass="row"><divclass="col-lg-7"><div>block1</div></div><divclass="col-lg-5"><div>block3</div></div><divclass="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 orderBootstrap with different order on mobile version (Bootstrap 4)

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

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

Edit clearfix added for large device

Share