Bootstrap 网格系统 1 行两列成 2 行答案

【问题标题】：Bootstrap grid system 1 row with two columns into 2 rowsBootstrap 网格系统 1 行两列成 2 行
【发布时间】：2021-12-25 13:58:16
【问题描述】：

所以我的网格上有这个布局

但随着宽度变小，我想更改为这种布局

目前为止我是这样的

.row > div {
  border: 1px solid black
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
  <div class="col-md-6">
   1
  </div>
  <div class="col-md-5">
    <div class='row'>
      <div class="col-md-12">
      2
      </div>
      <div class="col-md-12">
      3
      </div>
    </div>
  </div>
 
</div>

【问题讨论】：

这可能会有所帮助：stackoverflow.com/questions/45367864/…

标签： css bootstrap-4 flexbox css-grid

【解决方案1】：

像这样？

<div class='row'>
   <div class="col-md-6 col-sm-6">
      1
   </div>
   <div class="col-md-6">
      <div class='row'>
         <div class="col-md-12 col-sm-6">
            2
         </div>
         <div class="col-md-12 col-sm-12">
            3
         </div>
      </div>
   </div>
</div>

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

我认为 CSS Grid 布局到论文和可定制的最佳实践方式

.grid > div {
  border: 1px solid black;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

@media (min-width: 768px) {
  .one {
    grid-row: 1/3;
  }
}

.three {
  grid-column: 1/3;
}
@media (min-width: 768px) {
  .three {
    grid-column: 2/3;
  }
}

<div class='grid'>

  <div class="one">
    1
  </div>

  <div class="two">
    2
  </div>
  <div class="three">
    3
  </div>

</div>

【讨论】：