Bootstrap根據屏幕大小顯示特定的行嗎？

Question

我想知道Bootstrap是否具有內置的JS函數來根據設備屏幕大小顯示或隱藏行？ 可折疊列無法滿足我的需求。

例如（偽代碼）

if(screensize > 768px) {
<div class="row">
  <div class="col-md-8">
  <section>
    <ul>
      <li> <%= image_tag 'section_icons/cheese.png', class: 'section_img' %> Cheese </li>
      <li> <%= image_tag 'section_icons/wine.png', class: 'section_img' %> Wine </li>
    </ul>
  </section>
  </div>
  <div class="col-md-4">
    <div> other column content </div>
  </div>
</div>
} else {
<div class="row">
  <div class="col-xs-12">
  <section>
    <ul>
      <li> <%= image_tag 'section_icons/cheese.png', class: 'section_img' %> Cheese </li>
      <li> <%= image_tag 'section_icons/wine.png', class: 'section_img' %> Wine </li>
    </ul>
  </section>
    <div> other column content </div>
  </div>
</div>
}

Answer 1

看看http://getbootstrap.com/css/#sensitive-utilities

我認為這就是你所需要的

Answer 2

您應該使用CSS媒體查詢。 Bootstrap 3有幾個類可以幫助您。

您應該使用hidden- * / visible- * CSS類來控制哪些元素以不同的大小可見/隱藏。

Bootstrap CSS文檔