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

【问题标题】：How do i move my left element below my middle element on smaller screen (bootstrap)如何在较小的屏幕上将左侧元素移动到中间元素下方（引导程序）
【发布时间】：2016-06-29 05:38:12
【问题描述】：

当我缩小屏幕时，我想将我的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>

【问题讨论】：

问题需要问号“？”否则不清楚你在问什么。
对不起，我希望它现在更清楚:)

标签： html css twitter-bootstrap

【解决方案1】：

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

【讨论】：

谢谢，发现我只需要订购我的元素就可以找到答案

【解决方案2】：

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

1.您可以使用 Bootstrap 内置功能

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

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

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

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

您也可以在fiddle 中查看。

【讨论】：