4

I've been trying to wrap my head around how these work but so far I'm having no luck. On the website I have, the browser version looks like this:

<div class="col-sm-4">
     <div class="aside">
          <div class="promo">
               <p>left content</p>    
          </div>
     </div>
   </div>
   <div class="col-sm-8">
        <div class="content"> 
             <p>right content</p>
        </div>
   </div>

For the browser this works great, but on the mobile I'd like it to be layed out like this:

       <div class="col-sm-8">
            <div class="content"> 
                 <p>right content</p>
            </div>
       </div>
       <div class="col-sm-4">
         <div class="aside">
              <div class="promo">
                   <p>left content</p>    
              </div>
         </div>
       </div>

How would I lay it out with the push and pulls to get it to rearrange properly?

user2596635
  • 381
  • 1
  • 5
  • 17
  • you can see this post:http://stackoverflow.com/questions/29496846/change-column-order-using-bootstrap-push-and-pull – manupi26 Jun 01 '15 at 14:38

1 Answers1

3

The best way to develop with Bootstrap is to think "mobile first". So start with your mobile layout and add push/pull classes for other sizes. Note that I also added in col-xs-12 to your columns, it's technically not needed but it's nice to be explicit about these.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div class="row">
  <div class="col-xs-12 col-sm-8 col-sm-push-4">
    <div class="content">
      <p>right content</p>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4 col-sm-pull-8">
    <div class="aside">
      <div class="promo">
        <p>left content</p>
      </div>
    </div>
  </div>
</div>
DavidG
  • 113,891
  • 12
  • 217
  • 223