在移动设备中重新定位div

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 classes。以移动设备优先的方式构造HTML（即IE首先将两个徽标彼此直接相邻，然后在到达col-md断点时，将第二个徽标推到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>