ewcoder ewcoder - 5 months ago 69
Javascript Question

Bootstrap reorder col-xs-12

I am working with bootstrap and would like to have my columns reorder only in xs view.

For example:

large screens - tablet this is what it looks like:

column A ------- column B

The problem I am facing is when i get to xs it looks like this:


  • column A

  • column B



When I want it to look like this:


  • column B

  • column A


Answer

You Just need reverse the floats on the columns. have a look at below snippets.

DEMO

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-md-6 col-sm-6 col-xs-12 pull-right">
    Column B
  </div>
   <div class="col-md-6 col-sm-6 col-xs-12">
     Column A
  </div>
</div>