创建此类布局的最佳实践？

Question

最初我想在 bootstrap 4 中进行此布局，但现在我几乎可以肯定，如果不使用一些技巧，例如将内容加倍然后将其隐藏到移动/桌面或使用 javaScript，这是不可能的。

对于桌面：

+---+---+
| 1 |   |
+---+   +
| 3 |   |
+---+ 2 +
| 4 |   |
+---+   +
| 5 |   |
+--+----+

对于智能手机：

+---+
| 1 |
+---+
| 3 |
+---+
| 2 |
+---+
| 4 |
+---+
| 5 |
+---+

我在使用 Bootstrap 4 时面临的主要问题是列的高度相等，我不知道该怎么处理。 当然，我可以在两个嵌套列中执行此操作，但是我无法按照我想要的方式重新排列顺序。

在 bootstrap 3 中，我可以像示例 #9 中那样执行此操作： https://www.bootply.com/siUcTuNhUy 但是如何在 bootstrap 4 中做到这一点？

请告知我缺少什么。

Answer 1

不确定 Bootstrap 中的替代方案，但这可以使用 CSS 网格来完成。

您可以在此处找到带有解决方案的 codepen - https://codepen.io/vishwaovi/pen/RqKaMv?editors=1100

---

涉及的步骤：

1。将包含元素的父级定义为网格。

HTML

<div class="main">
  <div class="section section1"> 1 </div>
  <div class="section section2"> 2 </div>
  <div class="section section3"> 3 </div>
  <div class="section section4"> 4 </div>
  <div class="section section5"> 5 </div>
</div>

CSS

.main {
   display:grid;
   grid-template-columns: 1fr 1fr; // defining a two column grid
}

2。使 section2 从第 2 列开始并跨越 4 行

.section2{
  grid-column: 2;
  grid-row: span 4;
}

3。移动视图：将网格更改为列，并使 section2 从第 1 列和第 3 行开始

@media (max-width:800px){  
  .main{
    grid-template-columns: 1fr;
  }

  .section2{
    grid-column: 1;
    grid-row: 3 /span 1;
  }
}

Answer 2

也许这很有用。

为了满足您对智能手机布局的要求，我使用了 flexbox（带有 Bootstrap 4 网格）：

.grid .stacked {
  width: 48%
}

.grid .section {
  background: #069;
  margin: 5px auto;
  text-align: center;
  color: #fff;
  WIDTH: 100%;
}

@media (max-width: 575px) {
  .grid .stacked {
    width: 100%
  }
  .stacked .section:nth-child(1) {
    order: 1;
  }
  .stacked .section:nth-child(2) {
    background: #c00;
    order: 3;
  }
  .stacked .section:nth-child(3) {
    order: 2;
  }
  .stacked .section:nth-child(4) {
    order: 4;
  }
  .stacked .section:nth-child(5) {
    order: 5;
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="container">
  <div class="grid d-flex flex-wrap">
    <div class="stacked d-flex flex-column">
      <div class="section col-xs-12">1</div>
      <div class="section col-xs-12 d-block d-sm-none">2</div>
      <div class="section col-xs-12">3</div>
      <div class="section col-xs-12">4</div>
      <div class="section col-xs-12">5</div>
    </div>
    <div class="section col-xs-12 col-sm-6 d-none d-sm-block">2</div>
  </div>
</div>