css - 使用 bootstrap，台式机中有 4 列，平板电脑中有 2 列，移动设备中有 1 列

Question

使用 Bootstrap 非常有趣和有帮助，目前我在创建以下需求时遇到问题。

“使用 bootstrap 在桌面上有 4 列，在平板电脑上有 2 列，在移动设备上有 1 列”谁能告诉我正确的结构

Answer 1

不确定这是你想要的，但看看这个:-

DEMO

<div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12">Col 1</div>
    <div class="col-md-3 col-sm-6 col-xs-12">Col 2</div>
    <div class="clearfix visible-sm"></div>
    <div class="col-md-3 col-sm-6 col-xs-12">Col 3</div>
    <div class="col-md-3 col-sm-6 col-xs-12">Col 4</div>
</div>

--- UPDATED DEMO ---