bootstrap 3中的列重新对齐

Question

我正在尝试在引导程序中重新对齐列，但到目前为止没有成功。这就是它在桌面视图中的显示方式，这很好 desktop view。以下是压缩成 tablet view 大小时的样子。我希望所有者网关列与登录列交换位置。

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>

提前致谢。

Answer 1

我建议您阅读column ordering in the Bootstrap documentation。

在“所有者”div 上，使用类 col-sm-push-4 将其“推”到右侧，类似地在“登录”div 上使用类 col-sm-pull-4 将其“拉”到左侧。

Answer 2

这个怎么样：-

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