0

I am trying to re-align columns in bootstrap, but so far unsuccessfully. This is how it appears in desktop view which is fine desktop view. Here is how it looks when condensed in size tablet view. I would like the owner gateway column to swap places with the logged in column.

html:

    <div class="col-xs-4 col-sm-4 col-lg-3" id="logo">
    <img src="http://f.cl.ly/items/2B2c3t3d0N0r1F0F1m05/logo-white.png" class="img-responsive">
  </div>
  <div class="col-xs-8 col-sm-4 col-lg-6" id="main-title">
    <h1 class="title">Owner Gateway</h1>
  </div>
  <div class="col-xs-4 col-sm-4 col-lg-3 " id="logged-in">
    <p class="logged">Logged in as Mr Jones</p>
    <p class="log">Log out</p>
  </div>
  </div>

Thanks in advance.

1

2 Answers 2

0

I would suggest that you read up on column ordering in the Bootstrap documentation.

On the "owner" div, use the class col-sm-push-4 to "push" it to the right, and similarly on the "logged in" div use the class col-sm-pull-4 to "pull" it to the left.

0
0

How abt this one :-

<div class="col-xs-4 col-sm-4 col-lg-4" id="logo">
    <img src="http://f.cl.ly/items/2B2c3t3d0N0r1F0F1m05/logo-white.png" class="img-responsive">
  </div>
  <div class="col-xs-4 col-sm-4 col-lg-4" id="main-title">
    <h1 class="title">Owner Gateway</h1>
  </div>
  <div class="col-xs-4 col-sm-4 col-lg-4" id="logged-in">
    <p class="logged">Logged in as Mr Jones</p>
    <p class="log">Log out</p>
  </div>
</div>
1
  • thanks, but doesn't set the columns the way that i want them when the screen size is reduced.
    – totneschap
    Commented Jan 14, 2014 at 12:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.