Перестановка divs в мобильном телефоне

Question

У меня есть сайт, созданный в Bootstrap с 3 колонками. Первый - это логотип, второй - меню, а третий - другой логотип. Все выглядит нормально на обычном экране:

Теперь я хочу, чтобы когда пользователь просматривал веб-сайт на мобильном телефоне, он отображал как логотипы в первой строке, так и меню во второй строке. Как я могу это сделать?

Это мой код:

<div class="container">
<div class="row">
    <div class="col-md-2 "><img src="<?=Url::base(true);?>/images/logo-isr.png" id="logo-isr"></div>
    <div class="col-md-8 ">
        <div id="menu">
            <a href="<?= Url::to(['/']) ?>">HOME</a>    <span class="font-celeste">|</span>
            <a href="<?= Url::to(['/site/historia']) ?>">HISTORIA</a> <span class="font-celeste">|</span>
            <a href="<?= Url::to(['/site/institucional']) ?>">INSTITUCIONAL</a> <span class="font-celeste">|</span>
            <a href="<?= Url::to(['/site/rossellana']) ?>">FLIA. ROSSELLANA</a> <span class="font-celeste">|</span>
            <a href="<?= Url::to(['/site/noticias']) ?>">NOTICIAS</a> <span class="font-celeste">|</span>
            <a href="<?= Url::to(['/site/fotos']) ?>">FOTOS</a> <span class="font-celeste">|</span>
            <a href="<?= Url::to(['/site/administracion']) ?>">ADMINISTRACIÓN</a>
        </div>
    </div>
    <div class="col-md-2"><img src="<?=Url::base(true);?>/images/logo-congregacion.png" id="logo-congregacion"></div>
</div>

Answer 1

Для этого вы можете использовать классы push / pull .Структурируйте свой HTML в стиле «сначала для мобильных устройств» (в IE для начала есть 2 логотипа, непосредственно примыкающих друг к другу, а затем, когда вы достигнете точки останова col-md, переместите 2-й логотип в 8 столбцов и перетащите навигацию назад на 2 столбца):

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
    <div class="col-xs-6 col-md-2"><img src="<?=Url::base(true);?>/images/logo-isr.png" id="logo-isr"></div>
    <div class="col-xs-6 col-md-2 col-md-push-8"><img src="<?=Url::base(true);?>/images/logo-congregacion.png" id="logo-congregacion"></div>
    <div class="col-md-8 col-md-pull-2">
        <div id="menu">
            <a href="<?= Url::to(['/']) ?>">HOME</a>    <span class="font-celeste">|</span>
            <a href="<?= Url::to(['/site/historia']) ?>">HISTORIA</a> <span class="font-celeste">|</span>
            <a href="<?= Url::to(['/site/institucional']) ?>">INSTITUCIONAL</a> <span class="font-celeste">|</span>
            <a href="<?= Url::to(['/site/rossellana']) ?>">FLIA. ROSSELLANA</a> <span class="font-celeste">|</span>
            <a href="<?= Url::to(['/site/noticias']) ?>">NOTICIAS</a> <span class="font-celeste">|</span>
            <a href="<?= Url::to(['/site/fotos']) ?>">FOTOS</a> <span class="font-celeste">|</span>
            <a href="<?= Url::to(['/site/administracion']) ?>">ADMINISTRACIÓN</a>
        </div>
    </div>
</div>