Повторное выравнивание столбцов в bootstrap 3

Question

Я пытаюсь переустановить столбцы в bootstrap, но пока безуспешно. Вот как это выглядит на рабочем столе, это нормально 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.

В поле «владелец» используйте класс 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>