文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap右手边需要出现在移动端的左侧div上方

问Bootstrap右手边需要出现在移动端的左侧div上方
EN

Stack Overflow用户

提问于 2019-05-22 11:31:33

回答 2查看 49关注 0票数 1

在桌面视图中，这看起来像我想要的，但在移动视图中，边框移动到主框的下方。我想把它放在上面。我该怎么做？

https://jsfiddle.net/b4032v7z/2/

<body>
<div class='container'>
  <div class="row">
    <div class='bg-primary text-white col-md-7 offset-md-1'>Main Box
    </div>
    <div class=' bg-danger col-md-3 border-left pr-5'> Aside
    </div>
  </div>
</div>
</body>

bootstrap-4

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-05-22 12:06:12

使用bootstrap 4中的order类

<body>
    <div class='container'>
      <div class="row">
        <div class='bg-primary text-white col-md-7 order-2  order-md-1' >Main Box
        </div>
        <div class=' bg-danger col-md-3 border-left order-1 pr-5  order-md-2' > Aside
        </div>
      </div>
    </div>
    </body>

有关更多信息，请访问https://getbootstrap.com/docs/4.0/utilities/flex/#order

票数 2

Stack Overflow用户

发布于 2019-05-22 12:09:07

Twitter Bootstrap使用display:flex。您可以在css中使用" order“来控制内容的顺序。

https://jsfiddle.net/robbiegod/nd95m6xh/

.bg-primary {
  height: 100px;
  order: 3;
}

.bg-danger {
  height: 100px;
  order: 1;
}

@media only screen and (min-width: 768px) {
  .bg-primary {
    order: 1;
  }

  .bg-danger {
    order: 3;
  }
}

将其设置为您的默认顺序。

然后，在媒体查询中，将顺序更改为桌面所需的方式。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56248931

复制

相似问题

问Bootstrap右手边需要出现在移动端的左侧div上方
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap右手边需要出现在移动端的左侧div上方EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap右手边需要出现在移动端的左侧div上方
EN