Reordering bootstrap columns(nested)

Question

So I have three columns in bootstrap and are the following

Mobile:

[A]
[C]
[B]

Desktop:

[A][C]
[B]

Following is my code:

<div class="container">  
  <div class="row">
     <div class="content1 col-xs-12 col-md-6">
        A
       <div class="row">
          <div class="content2 col-xs-12 col-md-12 hidden-xs hidden-sm">
             B
          </div>   
       </div>
     </div>     
  <div class="content3 col-xs-12 col-md-6">
        C
  </div>
  <div class="content2 col-xs-12 col-md-12 hidden-md hidden-lg">
       B
  </div>          
</div>

I have achieved it using hidden classes, but is there a better way to do it using push/pull classes for example?

PS: I have a fixed height for [C], lets say 50vh.

If you are using bootstrap v4.1 then it is possible with the flex order. — Pramod, Apr 10 '18 at 09:57

Carol Skelly · Accepted Answer · 2018-04-10T14:43:38.093

1

You don't need to use nesting, push/pull or hidden classes. Use 50% width columns on larger md widths.

https://www.codeply.com/go/3APQ7tHCgS

<div class="container">
    <div class="row">
        <div class="content1 col-md-6">
            A
        </div>
        <div class="content3 col-md-6">
            C
        </div>
        <div class="content2 col-md-12">
            B
        </div>
    </div>
</div>

Also, note that col-xs-12 is implied in Bootstrap 3 when a larger grid column is used so it's not needed in the markup.

Related: How do I change Bootstrap 3 div column order

edited Apr 10 '18 at 14:43

answered Apr 10 '18 at 10:51

Carol Skelly

351,302
90
710
624

hey thanks for that... i have already tried that and it won't help in my case since content 3 has some fixed height! – Arcv Apr 10 '18 at 13:36

score 0 · Answer 2 · answered Apr 10 '18 at 09:55

Try this fiddle...

.content1{height:50vh !important;}

<div class="container">  
  <div class="content1 col-xs-12 col-md-6">
    A
  </div>     
  <div class="content3 col-xs-12 col-md-6">
    C
  </div>
  <div class="content2 col-xs-12 col-md-12">
    B
  </div>          
</div>

I think its working in both sizes (mobile and desktop).

Reordering bootstrap columns(nested)

2 Answers2