title: Bootstrap display certain row based on screen size?
body: <p>I'm wondering if Bootstrap has a built in <code>JS</code> function for displaying or hiding a row based on device screen size? <em>Collapsable columns is not capable of what I need.</em></p>
  
  <p>For example (pseudo code)</p>
  
  <pre><code>if(screensize &gt; 768px) {
  &lt;div class="row"&gt;
    &lt;div class="col-md-8"&gt;
    &lt;section&gt;
      &lt;ul&gt;
        &lt;li&gt; &lt;%= image_tag 'section_icons/cheese.png', class: 'section_img' %&gt; Cheese &lt;/li&gt;
        &lt;li&gt; &lt;%= image_tag 'section_icons/wine.png', class: 'section_img' %&gt; Wine &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/section&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4"&gt;
      &lt;div&gt; other column content &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  } else {
  &lt;div class="row"&gt;
    &lt;div class="col-xs-12"&gt;
    &lt;section&gt;
      &lt;ul&gt;
        &lt;li&gt; &lt;%= image_tag 'section_icons/cheese.png', class: 'section_img' %&gt; Cheese &lt;/li&gt;
        &lt;li&gt; &lt;%= image_tag 'section_icons/wine.png', class: 'section_img' %&gt; Wine &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/section&gt;
      &lt;div&gt; other column content &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  }
  </code></pre>