我正在处理的网站的一部分采用双列设计。我希望在所有屏幕尺寸上实现此功能,但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>