CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
jcastroa87
jcastroa87

Reputation: 391

bootstrap 3: column re-order on breakpoint

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>

Upvotes: 5

Views: 4944

Answers (2)

AhmedBinNasser
AhmedBinNasser

Reputation: 2732

I have a suggestion but maybe not the perfect solution but you can use it if you only need to reorder these two columns:

  1. remove from your code ( push ) and ( pull ) that you used.
  2. make another copy of your code under the original one.
  3. now the important thing is to use Responsive utilities that Bootstrap offer.
  4. all you need to do is to use this two classes ( .visible-xx ) and ( .hidden-xx ) and (xx : xs, sm, md, lg).
  5. by using them with your original code will make the Column you want visible or hidden at the resolution you need.

e.g:

 LG: ColumnA -- .visible-xx or .hidden-xx  ( at the needed resolution )
     ColumnB -- .visible-xx or .hidden-xx  ( at the needed resolution )

then the needed code using this two classes can also be like this :

MD: ColumnB  -- .visible-xx or .hidden-xx  ( at the needed resolution )
    ColumnA  -- .visible-xx or .hidden-xx  ( at the needed resolution )

** remember not to forget to change the order of your code in the copy like :

<div class="row">
   <div class="">
      ColumnB
   </div>

   <div class="">
      ColumnA
   </div>

Important:

It's better to use the modifier classes .col-md-push-* and .col-md-pull-* whenever possible, refer to the column ordering section in the Bootstrap documentation, if it's not working you can use the other way.

So you can try this first:

<div class="row">
    <div class="col-lg-9 col-lg-push-3">
        Column B will be here
    </div>
    <div class="col-lg-3 col-lg-pull-9">
        Column A will be here
    </div>
</div>

hope this will help you.

Upvotes: -1

Asotos
Asotos

Reputation: 1043

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

Upvotes: 9

Related Questions