Bootstrap push/pull column issue

Question

I have 4 columns like this

<div class="container">
  <div class="row">
    <div class="col-md-3"> col3</div>
    <div class="col-md-1"> col1</div>
    <div class="col-md-4"> col4</div>
    <div class="col-md-4"> col4</div>
  </div>
</div>

Normally it looks like this:
[3][1][4][4]

When it's in smaller viewport, I want it to show like this:
[4]
[4]
[3]
[1]

I have tried

 <div class="container">
      <div class="row">
        <div class="col-md-3 col-md-push-8"> col3</div>
        <div class="col-md-1 col-md-push-8"> col1</div>
        <div class="col-md-4 col-md-pull-4"> col4</div>
        <div class="col-md-4 col-md-pull-4"> col4</div>
      </div>
    </div>

It shows:
In large viewport:
[4][4][3][1]

In viewport that those columns collapse:
[3]
[1]
[4]
[4]
But it seems like what I did is completely reversed...
A created a codepen snippet http://codepen.io/ngp130895/pen/Kzxdpj How can I achieve this?

What does it show now? – Praveen Kumar Purushothaman Apr 25 '16 at 09:37 — Praveen Kumar Purushothaman, Apr 25 '16 at 09:37
after what screen you want to change the design? – Gaurav Aggarwal Apr 25 '16 at 09:39 — Gaurav Aggarwal, Apr 25 '16 at 09:39
@GauravAggarwal what do you mean by screen? – phuwin Apr 25 '16 at 09:45 — phuwin, Apr 25 '16 at 09:45

phuwin · Answer 1 · 2016-04-25T10:27:20.827

I found a workaround for this. ~~This looks kinda stupid but it works.~~

 <div class="container">
      <div class="row">

        <div class="col-md-4 col-md-push-4"> col4</div>
        <div class="col-md-4 col-md-push-4"> col4</div>        
        <div class="col-md-3 col-md-pull-8"> col3</div>
        <div class="col-md-1 col-md-pull-8"> col1</div>

      </div>
</div>

Edit: I found that this actually the correct way. Mobile view should be written by default and larger viewport is modified by pushing and pulling the columns.

score 1 · Accepted Answer · answered Apr 25 '16 at 10:16

1

you may get the solution in this link

answered Apr 25 '16 at 10:16

Iqbal Pasha

1,318
1
8
12

also you can get same solution at this link http://stackoverflow.com/questions/18057270/column-order-manipulation-using-col-lg-push-and-col-lg-pull-in-twitter-bootstrap – Iqbal Pasha Apr 25 '16 at 10:18
Bootstrap should definitely edit their documentation. They do not have this mentioned in their doc. – phuwin Apr 25 '16 at 10:48
Yes, but they do not give clear description about that. – phuwin Apr 25 '16 at 11:31

score -1 · Answer 3 · answered Apr 25 '16 at 09:43

Div is an element block and every new div go to the head of the line. For fix this problem have two way:

Use tag
Use a code CSS for do became tag inline

For the first way you must only change tag <div> with <span. For the last way you can use it:

div.container > div.row > div {
  display: inline;
}

<div class="container">
  <div class="row">
    <div class="col-md-3"> col3</div>
    <div class="col-md-1"> col1</div>
    <div class="col-md-4"> col4</div>
    <div class="col-md-4"> col4</div>
  </div>
</div>

Sorry, but I do not understand your answer that good. Thanks for answering anyway. — phuwin, Apr 25 '16 at 09:48

Bootstrap push/pull column issue

3 Answers3