Question

我已经读过我可以使用https://getbootstrap.com/css/#grid-column-ordering订购我的网格列，但是，遗憾的是，我找不到第一种方法可以使用＃34;右列＃34;只是处于崩溃状态。

目前我有两列＆＃34; LEFT＆＃34; （col-lg-4）和＆＃34; RIGHT＆＃34; （COL-LG-8）。我希望RIGHT列在LEFT列的顶部折叠，但如果没有折叠则保持在右侧。

如何？

Answer 1

对于较新的 Bootsrap 版本，您可以使用 flex-column reverse 并设置发生 reverse 属性的大小（即低于 flex-lg-row）：

<div class="row flex-column-reverse flex-lg-row">
    <div class="col-lg-4">
        sidebar
    </div>
    <div class="col-lg-8">
        main
    </div>
</div>

有一个重复的线程： How do I change Bootstrap 3 column order on mobile layout?

Answer 2

将float: right添加到两者中，并将正确的一个放在HTML代码中的左侧之前。

Answer 3

你可以使用顺序，将第一个col设置为更高的顺序（如'order-md-3'），将md形成为高尺寸窗口，因为更高的顺序，它会在右侧，第二个col将在左侧，因为它的没有顺序相同的 0 顺序（较低的顺序将在左侧）。

<div class="row">

      <div class="col-md-5 order-md-3">
        <img src="../img/profile/fotocv.png" alt="foto profile" width="100%">
      </div>

      <div class="col-md-7">
        <div class="plang">
          <h1>Hi!</h1>
          <h1>I'M AMMARIDHO SIREGAR</h1>
          <h3>Web Developer</h3>
        </div>
      </div>

 </div>

Bootstrap网格折叠 - ＆gt;右栏在上面？

3 个答案: