Haradzieniec Haradzieniec - 3 months ago 12
HTML Question

Twitter Bootstrap: move div from one column to another, order counts for mobile devices

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


How to make it look like

block1
block3
block2


for mobile?

P.S. Of course I took a look at this questions before I asked mine:

SO: How do I change Bootstrap 3 column order on mobile layout?

It doesn't help.
Also, adding
hidden-xs
and
visible-xs
for two blocks of

<div>block2 with IDs and classes</div>


in different places doesn't help as IDs should be unique on the page.

Any suggestions? Thank you.

Answer

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