引导网格折叠 - >顶部的右列？答案

【问题标题】：Bootstrap grid collapse -> right columns on top?引导网格折叠 - >顶部的右列？
【发布时间】：2017-02-17 11:13:31
【问题描述】：

我读到我可以使用https://getbootstrap.com/css/#grid-column-ordering 对我的网格列进行排序，但是，不幸的是，我找不到仅在折叠状态下“右列优先”的方法。

目前我有两列“LEFT”（col-lg-4）和“RIGHT”（col-lg-8）。我希望 RIGHT 列折叠在 LEFT 列的顶部，但如果不折叠则留在右侧。

怎么做？

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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?

【讨论】：

【解决方案2】：

你可以使用顺序，将第一个列设置为更高的顺序（如'order-md-3'），将md形成为大尺寸窗口，它将在右侧，因为更高的顺序，第二个列将在左侧，因为它的没有订单相同的 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>

【讨论】：

【解决方案3】：

在两者中添加float: right，并在 HTML 代码中将右侧放在左侧之前。

【讨论】：

这听起来像是一个变通办法，这真的是“要走的路”吗？
您也可以改为添加类.pull-right - 它包含float: right 属性并带来相同的结果。正如我所写的，您仍然必须反转 HTML 中的元素。