Bootstrap根据屏幕大小显示特定的行吗？

Question

I'm wondering if Bootstrap has a built in JS function for displaying or hiding a row based on device screen size? Collapsable columns is not capable of what I need.

For example (pseudo code)

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

take a look at http://getbootstrap.com/css/#responsive-utilities

I think It's what you need

Answer 2

You should use CSS media queries. Bootstrap 3 has several classes to help you with this.

You should use the hidden-* / visible-* CSS classes to control which elements are visible/hidden in different sizes.

Bootstrap CSS documentation