2

I am trying to reorder div tags with Bootstraps push/pull classes. This stackoverflow answers it to an extent:

Reordering divs responsively with Twitter Bootstrap?

But I don't think the answer is complete. Yes, it moves the divs to the correct spot, but as soon as you add content to the the div labled "B", it pushes down the div labeled "C".

How do you keep "C" directly under "A" without having "B" push it down?

Example: http://www.bootply.com/WYZUhmD0Ft

I was able to use "pull-right" and "pull-left" instead and they work. However, they are not responsive and require additional css to work at different breakpoints.

http://www.bootply.com/PILUCrxwYa

Community
  • 1
  • 1
crisgaret
  • 21
  • 1

1 Answers1

0

Take a look at this answer to a similar question.

The layout that you want can be achieved using floats.

<div class="container">    
<div class="row">
    <div class="col-xs-12 col-md-3 pull-right">Content of A</div>
    <div class="col-xs-12 col-md-9 pull-left">
        <p>Content</p>
        <p>of</p>
        <p>B</p>
    </div>        
    <div class="col-xs-12 col-md-3 pull-right">Content of C</div>
</div>

Edit:

If you need this behavior only on some screens you could create your own classes:

Add these custom styles in your LESS file: (variables taken from grid.less)

@media (min-width: @screen-sm-min) {
   .pull-right-sm {
       float: right;
   }
}

@media (min-width: @screen-md-min) {
    .pull-right-md {
        float: right;
    }
}

@media (min-width: @screen-lg-min) {
    .pull-right-lg {
         float: right;
    }
}

So you now have the classes pull-right-sm pull-right-md pull-right-lg.

Community
  • 1
  • 1
Catalin MUNTEANU
  • 5,618
  • 2
  • 35
  • 43
  • Yeah, that is the solution I am using now. Just wondered if there was a solution using the new push/pull classes in 3.0 (i.e. "col-md-push-6") And that is to say, I'm not even sure there is a need for that functionality. The way you showed works. – crisgaret May 30 '14 at 16:43
  • What do you mean pull-left pull-right is not responsive? – Catalin MUNTEANU May 30 '14 at 16:44
  • You set the size of the columns by using the appropriate classes for each size: col-md-val col-xs-val col-sm-val col-lg-val (where val in [1, 12]) – Catalin MUNTEANU May 30 '14 at 16:47
  • The way I understand it, and correct me if I am wrong, "pull-right" will always float to the right regardless of view breakpoints, and "col-md-push-6" will float to the right in the "md" and larger views. Excluding the "sm" and smaller views. – crisgaret May 30 '14 at 16:49
  • Thanks @CatalinMunteanu, that is exactly what I did for my project, I guess I was just wondering if the Bootstrap styles outlined here: http://getbootstrap.com/css/#grid-column-ordering were working as intended (by not floating properly), or maybe I was doing something wrong. Either way, thanks for your time. – crisgaret May 30 '14 at 17:05