Bootstrap 4：移动设备中的列排序

Question

我正在尝试转以下布局（桌面）

进入这款响应式手机：

使用下面的 HTML，我只能显示前两个 ul 的“in-block”，但不能显示图标 div 或时事通讯 div。我猜这个问题始于第二个 ul 底部的 LORAE IPSUM 上限，但我不知道如何解决它。我尝试了几种解决方案，但我变得更加困惑......有人可以帮我完成这个吗？我是使用引导程序的新手，谢谢。代码：

 <div class="row">
            <div class="col-6 col-md-2">
                 <h6>LORA IPSUM</h6>
                <ul >

                    <li>Lorae Ipsum</li>
                   <li>Lorae Ipsum</li>
                    <li>Lorae Ipsum</li>


                </ul>

            </div>
            <div class="col-6 col-md-2">
                <h6>LORAE IPSUM</h6>
                <ul >

                     <li>Lorae Ipsum</li>
                    <li>Lorae Ipsum</li>
                    <li>Lorae Ipsum</li>
                    <li style="height:30px;"></li>            
                  </ul>


                <h6>LORAE IPSUM</h6>
                <h6>LORAE IPSUM</h6>
            </div>
            <div class="col-6 col-md-2 ">

                   <h6>LORAE IPSUM</h6>
                   <h6>LORAE IPSUM</h6>
                   <h6>LORAE IPSUM</h6>
                   <h6>LORAE IPSUM</h6>



            </div>
            <div class="col-6 col-md-6 ">

                <div class="row">
                    <div class="col-6 col-md-6 ">
                        <h6>LORAE IPSUM</h6>
                        <a> 
                      <img class="img-fluid" 
 src="http://via.placeholder.com/40x40">
                        </a>
                        <a> 
                      <img class="img-fluid" src="http://via.placeholder.com/40x40">
                        </a>
                        <a> 
                        <img class="img-fluid" src="http://via.placeholder.com/40x40">
                        </a>
                        <a> 
                          <img class="img-fluid" src="http://via.placeholder.com/40x40">
                        </a>
                        <a> 
                         <img class="img-fluid" src="http://via.placeholder.com/40x40">
                        </a>

                    </div>

                    <div class="col-6 col-md-6  ">
                        <h6>NEWSLETTER</h6>
                            <div class="row">
                                <div class="col-12">
                                    <button>Subscribe</button>
                                </div>
                            </div>
                        <div class="row" style="height:50px;">                            
                            </div>
                        <div class="row ">
                                <div class="col-12 part">
                                      <a>
                                    <img class="img-fluid" src="http://via.placeholder.com/100x30">
                                    </a>
                                </div>
                            </div>
                        <div class="row ">
                                <div class="col-12 part">
                                     <a>
                                    <img class="img-fluid" src="http://via.placeholder.com/100x30">
                                    </a>
                                </div>
                            </div>
                    </div>


                </div>



            </div>
        </div>

Answer 1

我相信您要问的是“有没有办法在类似于 InDesign 的 Bootstrap 网格中从一个单元格到另一个单元格溢出文本？”

我从来没有遇到过这样的事情。 Bootstrap 在网格中移动单元格，并不真正关心其中的内容。 text-overflow 是我首先想到的，但这可能与您正在寻找的完全相反。