使用引导程序在断点 md 上打破 2 中的列答案

【问题标题】：break a column in 2 on breakpoint md using bootstrap使用引导程序在断点 md 上打破 2 中的列
【发布时间】：2021-11-24 18:11:06
【问题描述】：

我想在断点 -md 上按特定顺序破坏卡片。如下图。

我希望上面的图片清楚我想要实现的目标。如果可能的话，应该使用引导程序和/或最少的 CSS 来完成。

全部使用BS5编写。

到目前为止的代码：

.scroll_card_expense {
  overflow-y: scroll;
  height: 700px;
}

.payee_card {
  overflow-y: scroll;
  max-height: 465px;
}

.col_height {
  max-height: 800px;
}

<div class="container px-3">
  <div class="row flex-md-row-reverse py-3">

    <div class="col-md-6 col_height">
      <!-- LIGHT BLUE CARD-->
      <div class="order-md-1 card my-2">
        <div class="card-body">
          ...
        </div>
      </div>
      <!-- LIGHT BLUE CARD-->
      <!-- DARK BLUE CARD-->
      <div class="order-md-1 card my-2">
        <div class="card-body">
          ...
        </div>
      </div>
      <!-- DARK BLUE CARD-->
      <!-- GREEN CARD-->
      <div class="order-md-1 card my-2">
        <div class="card-body">
          ...
        </div>
      </div>
      <!-- GREEN CARD-->
    </div>

    <div class="col-md-6 col_height">
      <!-- YELLOW CARD-->
      <div class="order-md-3 card my-2">
        <div class="card-body scroll_card_expense">
          ...
        </div>
      </div>
      <!-- YELLOW CARD-->
    </div>
  </div>

谢谢。

【问题讨论】：

标签： html css breakpoints bootstrap-5 card

【解决方案1】：

如果您使用类行更改 div 的方向，您可以这样做。像这样：

<div class="row flex-md-row-reverse py-3" dir="rtl">
   ...
  </div>

在你的 css 文件中：

.col_height {
  max-height: 800px;
  direction:ltr;
}

【讨论】：