html - Bootstrap 基本网格布局冲突

Question

我正在处理的网站的一部分采用两栏设计。我希望这适用于所有屏幕尺寸，xs 设备除外。在 xs 设备上，我想要单列设计。我觉得下面的方法是不正确的，因为在所有情况下 col-span 总加起来应该是 12，而目前 xs 屏幕不是这样。另一方面，如果我更改它 col-xs-6，它会强制在超小屏幕上进行双列设计，而我正试图避免这种情况。

在超小屏幕上完成单列设计，同时在所有其他屏幕尺寸上保持双列设计的正确方法是什么？

这是我尝试过的:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="ac-wrapper">
                <div class="ac-h">
                    Heading 2
                </div>
                <p class="ac-p">
                text here text here text here text here text here text here text here text her text here text here text here text here text here text here text here text here text here text here 
                </p>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
            <div class="ac-wrapper">
                <div class="ac-h">
                    Heading 123
                </div>
                <p class="ac-p">
                    text here text here text here text here text here text here text her text here text here text here text here text here text here text here text here text her text here text here text here text here 
                </p>
            </div>
        </div>
    </div>
</div>

Answer 1

一种解决方案是使用 http://getbootstrap.com/css/#responsive-utilities 切换内容可见性