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

Question

<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. Example:

IMPORTANT: block 3 may be (and it is) taller (the height is bigger) than block1.

Atal Kishore · Answer 1 · 2016-09-01T13:13:15.167

1

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

edited Sep 01 '16 at 13:13

answered Sep 01 '16 at 13:01

Atal Kishore

4,480
3
18
27

1

Sorry, for large screen your code https://jsfiddle.net/5dkmx4vx/ is not correct as it shows all blocks in one line, but block2 supposed to be UNDER block1 for large devices. – Haradzieniec Sep 01 '16 at 13:06
1

Sorry, it is still different. I will attach the image in a minute or two. – Haradzieniec Sep 01 '16 at 13:32
1

This doesn't work at all. The `col-sm-*-12` pushes the cols off the screen. – Carol Skelly Sep 01 '16 at 14:19

Carol Skelly · Accepted Answer · 2018-04-25T11:05:22.753

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)

edited Apr 25 '18 at 11:05

answered Sep 01 '16 at 13:46

Carol Skelly

351,302
90
710
624

I don't know who downvoted.. not me... . I liked your answer BUT...SADLY, the block2 for large devices comes much lower than block 3: https://jsfiddle.net/wr22s3qc/ Do you see it looks sadly wrong? – Haradzieniec Sep 01 '16 at 14:07
yeah, hieght makes a difference. Add a special class to float:right on large screens. [Updated example](http://www.codeply.com/go/jgvSJrMOnk) – Carol Skelly Sep 01 '16 at 14:23
please also update your answer. This is the correct answer: jsfiddle.net/wr22s3qc – Haradzieniec Sep 01 '16 at 14:44
1

Cool, I will. Please also update the question to indicate that block 3 is taller. The right float is only needed when the column in taller. – Carol Skelly Sep 01 '16 at 14:46
1

the question was updated (added information about the height) - the very last sentence in bold, under the image. I'm curious who downvoted your answer. Your answer is correct! – Haradzieniec Sep 02 '16 at 13:10
@ZimSystem is this possible in BS4? – godblessstrawberry Apr 25 '18 at 10:59
@godblessstrawberry - you probably are looking for [this answer](https://stackoverflow.com/questions/48882342/bootstrap-with-different-order-on-mobile-version/4888575). – Carol Skelly Apr 25 '18 at 11:04
1

@ZimSystem yeah, floats(( we have here battle on what to use CSS Grids or BS4. I used grids not much but it seems to me we will have to implement BS columns system with CSS Grid which will take a lot of time. so I'm trying to show BS4 is not so bad but everyone wants grids... – godblessstrawberry Apr 25 '18 at 11:17

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

2 Answers2

Linked