Bootstrap：在小屏幕上重新排序 3 列

Question

我在尝试使用引导程序、HTML 和 CSS 对列重新排序时遇到了一些问题。

目前，我的布局是这样的：

B 和 C 包含在单个列中，而 A 有一个单独的列。 在台式机和平板电脑上可以这样，但我需要为小型设备重新排序内容以获得如下内容：

我的代码目前是这样的：

 <div class="container"> <div class="row padding-m"> <div class="col-md-6"> <div class="card" style="padding: 0px 20px;"> BLOCK A </div> </div> <div class="col-md-6"> <div class="card" style="border: none;"> BLOCK B BLOCK C </div> </div> </div> </div>

所以我的问题是，一方面，我需要将第 2 列分成两部分，另一方面，我需要 B 移动到列的顶部，C 移动到底部。 有没有办法做到这一点？

Answer 1

假设“A”比您的图片更高，只需在其他列上使用pull-right和col-xs-12以确保移动设备上的全宽...

演示

<div class="row">
        <div class="col-xs-12 col-md-6 pull-right">
            <div>
                B
            </div>
        </div>
        <div class="col-xs-12 col-md-6">
            <div>
                A
            </div>
        </div>
        <div class="col-xs-12 col-md-6 pull-right">
            <div>
                C
            </div>
        </div>
    </div>

演示

Answer 2

使用 bootstrap 4 pull-right不再起作用，并且它也不与 flex 兼容。

与 flex 兼容的解决方案可以基于：

• display: contents使元素的子元素看起来好像它们是元素父元素的直接子元素，而忽略元素本身。 当使用 CSS 网格或类似布局技术时应该忽略包装器元素时，这会很有用。
• order: -1用于重新排序“B”元素。

没有任何库的纯 HTML+CSS 解决方案的完整代码：

 * { box-sizing: border-box; } .main-container { display: flex; } .item { width: 50%; } .photo-container { background: #AAF; display: flex; align-items: center; justify-content: space-around; padding: 1rem; } .photo { background: #55F; width: 140px; height: 220px; border: solid 1px #33F; } .product-details h1 { background: #FAA; margin: 0; padding: 1rem; } .product-description { background: #FFA; padding: 1rem; } @media (max-width: 600px) { .main-container { flex-direction: column; } .item { width: 100%; } .product-details { display: contents; } .product-details h1 { order: -1; } }

 <div class="main-container"> <div class="item photo-container"> <div class="photo"></div> </div> <div class="item product-details"> <h1>Product name</h1> <div class="product-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div>

基于bootstrap 4的解决方案：

 * { box-sizing: border-box; } .photo-container { background: #AAF; display: flex; align-items: center; justify-content: space-around; } .photo { background: #55F; width: 140px; height: 220px; border: solid 1px #33F; } .product-details h1 { background: #FAA; } .product-description { background: #FFA; } @media (max-width: 576px) { .product-details { display: contents; } .product-details h1 { order: -1; } }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row flex-column flex-sm-row"> <div class="col-12 col-sm-6 photo-container"> <div class="photo"></div> </div> <div class="col-12 col-sm-6 product-details"> <h1>Product name</h1> <div class="product-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> </div> </div>