Bootstrap right Column on top on mobile view

by

Use Column ordering to accomplish this.

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…

DEMO

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

More Related Contents:

  1. vertical-align with Bootstrap 3
  2. What is sr-only in Bootstrap 3?
  3. How to vertically center a container in Bootstrap?
  4. IE8 issue with Twitter Bootstrap 3
  5. Twitter Bootstrap 3 Sticky Footer
  6. Twitter Bootstrap 3, vertically center content [duplicate]
  7. Extend bootstrap row outside the container
  8. Gap in Bootstrap stacked rows
  9. 7 equal columns in bootstrap
  10. Exclude menu item from the collapse of bootstrap 3 navbar
  11. How do I add a margin between bootstrap columns without wrapping [duplicate]
  12. Inline Form nested within Horizontal Form in Bootstrap 3
  13. Same height column bootstrap 3 row responsive
  14. Bootstrap 3 – How to maximize input width inside navbar
  15. Bootstrap 3 Glyphicons CDN
  16. Bootstrap 3: Push/pull columns only on smaller screen sizes
  17. What is the purpose of .row in Bootstrap? [duplicate]
  18. Bootstrap Grid, do I need a container?
  19. Bootstrap full-width text-input within inline-form
  20. Bootstrap 3 – show collapsed navigation for all screen sizes
  21. Bootstrap 3 grid, does it *really* matter how many columns are in a row?
  22. How to make bootstrap carousel image responsive?
  23. How to use bootstrap-theme.css with bootstrap 3?
  24. Make Bootstrap’s Carousel both center AND responsive?
  25. How to work with ellipsis in bootstrap responsive table
  26. Styling text input caret
  27. Make Iframe to fit 100% of container’s remaining height
  28. Internet Explorer 11 word wrap is not working
  29. Width 100% with white borders around it. WHy?
  30. Why would the height increase with a smaller font size?

Leave a Comment