引导响应式布局差异

Question

我想创建这个布局。我尝试让 2 和 4 div 重复并在移动设备上显示它们并在桌面和相反方向显示。

此代码按预期工作。但我想知道是否可以在不复制内容的情况下制作它。

<div class="row">
                                    <div class="col-md-2 col-12">
                                        <img src="http://via.placeholder.com/106x106">
                                        <div class="show-mobile">
                                            <div>content2</div>
                                            <div>content4</div>
                                        </div>
                                    </div>
                                    <div class="col-md-8 col-12">
                                        <div class="show-desktop">
                                                content2
                                        </div>
                                        <div>
                                            content 3
                                        </div>
                                    </div>
                                    <div class="col-md-2 col-12">
                                        <div class="show-desktop">
                                            content 4
                                        </div>
                                        <div>
                                            content 5
                                        </div>
                                    </div>
                                </div>

Answer 1

这可能不是一个完美的解决方案，但视觉上看起来足够接近

<div class="container">
  <div class="row">

    <div class="col-4 col-md-2">
      <img src="http://via.placeholder.com/106x106">
    </div>        
    <div class="col-8 col-md-8 bg-light border">
      2
    </div>
    <div class="col-12 col-md-8 offset-md-2 order-2 bg-light border">
      3
    </div>       
    <div class="col-8 offset-4 col-md-2 offset-md-0 bg-light border">
      4
    </div>
    <div class="col-12 col-md-2 order-3 bg-light border">
      5
    </div>    

  </div>
</div>