Stack horizontal from right to left

Question

I am using BootStrap 3 Framework for my portfolio

I am trying to make 2 columns in a section with classes of col-md-6. The problem is I want the right hand side column to stack first and not the left hand side when the website goes responsive. So how do I do it?

Use Push & Pull options available in the bootstrap. – Learning Mar 09 '16 at 04:13 — Learning, Mar 09 '16 at 04:13

score 1 · Accepted Answer · edited May 23 '17 at 12:15

Collected from another Answer

Documentation: grid-column-ordering

col-md-push-6 will "push" the column to the right 6 and col-md-pull-6 will "pull" the column to the left on "md" or greater view-ports. On any smaller view-ports the columns will be in normal order again.

I think what throws people off, is that you have to put B above A in your HTML. There may be a different way to do this where A can go above B in the HTML, but I'm not sure how to do it...

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

view-port >= md

|A|B|

view-port < md

|B|
|A|

Ref: bootstrap-right-column-on-top-on-mobile-view

Thanks Alot for your help – Dargahwala Idrees Mar 10 '16 at 03:19 — Dargahwala Idrees, Mar 10 '16 at 03:19

score 0 · Answer 2 · answered Mar 09 '16 at 06:33

0

Hint: Use col-xs-6 too for extra small devices.

answered Mar 09 '16 at 06:33

user31782

7,087
14
68
143

@EugeneS This should not be a comment as per SE guidelines. – user31782 Mar 09 '16 at 07:17

Stack horizontal from right to left

2 Answers2