引导程序:在小屏幕上重新排列3列 [英] Bootstrap: reorder 3 columns on small screens

问题描述

尝试使用引导程序，HTML和CSS重新排序列时遇到一些问题.

I'm having some problems when trying to reorder columns using bootstrap, HTML and CSS.

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

Currently, my layout is something like this:

B和C包含在单个列中，而A本身具有一列.在台式机和平板电脑上就可以了，但是我需要为小型设备重新排序内容，以获得以下信息:

B and C are contained inside a single column, while A has a column for itself. On desktop and tablets it's okay like that, but I need to reorder the content for small devices to get something like this:

我的代码当前是这样的:

My code is currently like this:

    <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移至底部.有什么办法吗?

So my problem is that, on one hand, I would need to split column 2 in two parts, and on the other, I would need B to move to the top of the column and C to move to the bottom. Is there any way of doing this?

推荐答案

假定图片中的"A"高，只需在其他列上使用pull-right，并在移动设备上使用col-xs-12以确保全角.

Assuming "A" is taller as in your picture, just use pull-right on the other columns, and col-xs-12 to ensure full width on mobile...

演示

<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>

演示

这篇关于引导程序:在小屏幕上重新排列3列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！