title: Using if/else with twig based on viewport size
body: <p>I'm using twig to create a small responsive website to list out photos from an array over several pages.  For the front-end, I'm using bootstrap to list to display them in neat rows for each device.</p>
  
  <pre><code>&lt;div class="row-fluid"&gt;
     {% for index, photo in photos %}
        &lt;div class="col-xs-6 col-sm-4"&gt;
        {% if (index + 1) % 2 == 0 %}
           &lt;/div&gt;
             &lt;div class="row-fluid"&gt;
        {% endif %}
     {% endfor %}     
     &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I want this to list out and start a new row if there's 2 on mobile, or 3 in a row on a larger device.  My question is based on this line;</p>
  
  <pre><code>  {% if (index + 1) % 2 == 0 %}
  </code></pre>
  
  <p>Based on the screen size, I'd like to be able to change the <code>2</code> to be a higher value if the viewport is a certain width to display more products in a row.  I can't think of a solution for doing this.  I know I could use Ajax to pass the width of the viewport when the screen resizes, but I'm not show how I could set that value to automatically update my twig if statement.</p>
  
  <p>Any help would be greatly appreciated.</p>