bootstrap 3: column re-order on breakpoint

Question

Hello i was doing an interface with column ordering in Bootstrap 3 and i got this problem.

I have 2 columns by this:

LG: ColumnA ColumnB

MD: ColumnA
       ColumnB

but i need this:

LG: ColumnA ColumnB

MD: ColumnB
       ColumnA

How i can reordening on MD resolution the divs? im trying with pull and push and no getting luck :(

Thanks in advance...

Here is my code:

<div class="col-xs-12 col-md-12 col-lg-12">
<div class="row">
    <div class="col-xs-12 col-md-12 col-lg-push-0 col-lg-9">
        ColumnA
    </div>

    <div class="col-xs-12 col-md-12 col-lg-pull-0 col-lg-3">
        ColumnB
    </div>
</div>

Answer 1

Bootstrap 3 uses a mobile-first approach, which means fixing things like the grid for smaller screens first, and then moving on to apply styles for the desktop.

If it's ok semantically and SEO-wise (same thing IMO) change the mark-up to reflect the desired order for your columns in Extra Small, Small and Medium devices, and then apply col-lg-push-* and col-lg-pull-* to re-order your columns for large devices.

Here is the code for your case:

<div class="row">
    <div class="col-lg-9 col-lg-push-3">
        ColumnB
    </div>
    <div class="col-lg-3 col-lg-pull-9">
        ColumnA
    </div>
</div>

If it doesn't make sense semantically to change your mark-up, I'm afraid col-*-push-* and col-*-pull-* won't help, and probably some hacking is due...