在移动设备中重新定位 div答案

【问题标题】：Reposition divs in mobile在移动设备中重新定位 div
【发布时间】：2018-11-20 10:21:27
【问题描述】：

我有一个用 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>

【问题讨论】：

标签： css html twitter-bootstrap-3

【解决方案1】：

您可以为此使用push/pull classes。以移动优先的方式构建您的 HTML（IE 有 2 个直接相邻的徽标开始，然后当您到达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>

【讨论】：