Question

当我缩小屏幕时，我想将left element(bild)移到middle element(col-md-4)以下。因为现在我的照片最终高于我的文字。

如何让我的左（bild）元素在小屏幕上的中间元素（col-md-4）下方结束？

<div class="container-fluid">

    <div class="headerfilo"></div>
    <div class="row">

        <div class="headfil">
            <div class="col-md-5" style="background-color: #FF9999">Left</div>
            <div class="col-md-4">
                <h3>FILOSOFI</h3>
            </div>
            <div class="col-md-3" style="background-color: #FF9999">Right</div>
        </div>

    </div>
    <div class="row">
        <div class="midfil">
            <div class="col-md-5"> 
                <div id="bild" class="bildfilo"></div>
            </div>
            <div class="col-md-4"> 
                <p>Trivs du med att arbeta agilt, med prestigelöshet och i en platt organisation där dina prestationer syns och uppmärksammas? Då kan  vara företaget för dig. Just nu har vi öppningar på följande positioner men vi är alltid intresserade av nya talanger </p>

                <p>Trivs du med att arbeta agilt, med prestigelöshet och i en platt organisation där dina prestationer syns och uppmärksammas? Då kan vara företaget för dig. Just nu har vi öppningar på följande positioner men vi är alltid intresserade av nya talanger</p>
            </div>
            <div class="col-md-3" style="background-color:#FF9999">Right</div>
        </div>
    </div>
</div>

Answer 1

对要重新定位的div使用pull left或pull-right类。

了解更多信息 -

请参阅Bootstrap: change div order with pull-right, pull-left / 3 columns

Answer 2

你可以通过两种简单的方法来解决这个问题（还有更多，但这些是目前我想到的最简单的方法）。

<强> 1。您可以使用Bootstraps构建功能

Bootstrap为您提供了一些类，这些类会影响您当前屏幕宽度的标记。话虽这么说，根据你的屏幕宽度，你可以看到2个容器（主要部分之前和之后1个）。为此，您可以使用.visible-xs-*和.hidden-xs。要了解详情，请查看this。

<强> 2。使用您自己的媒体规则

另一种方法是使用您自己的响应式媒体规则。所以这基本上与使用Bootstraps内置功能相同，只是不使用多个容器。一个简单的解决方案如下所示：

@media (max-width: 760px)  {
  .top {
    position: absolute;
    top: 0;
  }
  .left {
    margin-top: 5em;
  }
}

您也可以在此fiddle中查看。

如何将我的左侧元素移动到较小屏幕上的中间元素下方（引导程序）

2 个答案: