<!-- Bucket Boxes -->
<div class="buckets">
  <div class="row">
    <?php
        
    if ( $posts_query->have_posts() ) : while ( $posts_query->have_posts() ) : $posts_query->the_post();
      $child_posts = types_child_posts('bucket-box');
    $child_posts_sorted = usort($child_posts, function ($a, $b){
      $a_viewOrder = intval($a->fields['bucket-view-order']);
      $b_viewOrder = intval($b->fields['bucket-view-order']);
      if ($a_viewOrder == $b_viewOrder) { return 0; }
      return ($a_viewOrder < $b_viewOrder) ? -1 : 1;
    });

    
   
    $cols = 3;

    foreach ($child_posts as $key=>$post) :
    $bucket_image = types_render_field("bucket-image", array("raw"=>"true"));
    $bucket_image_small = types_render_field("bucket-image-small", array("raw"=>"true"));
    $bucket_url = types_render_field("bucket-url", array("raw"=>"true"));
    $bucket_width_weight = types_render_field("bucket-width-weight", array("raw"=>"true"));
    ?>
    <?php if($key > 0 && $key % $cols == 0) { ?>
  </div>
  <div class="row">
    <?php } ?>
    <div class="col-sm-<?php echo $bucket_width_weight ?> hidden-xs">
      <a href="<?php echo empty($bucket_url) ? "javascript:;" : $bucket_url; ?>" class="bucket-box">
        <img class="bucket-box-image" src="<?php echo $bucket_image ?>" />
      </a>
    </div>
    <div class="col-xs-12 visible-xs text-center margin-bottom">
      <a href="<?php echo empty($bucket_url) ? "javascript:;" : $bucket_url; ?>" class="bucket-box">
        <img class="bucket-box-image" src="<?php echo $bucket_image_small ?>" />
      </a>
    </div>
    <?php
    endforeach;
    endwhile; endif;
    ?>
  </div>
</div>