<style>

    @media (max-width: 750px) {
        .show-xs {
            display: inline-table;
        }

        .hide-xs {
            display: none;
        }
    }

    @media (min-width: 750px) {
        .hide-xs {
            display: revert;
        }

        .show-xs {
            display: none;
        }
    }
</style>
<table class="table table-bordered">
    <tbody>
    {if $reco.product_id_mvs1}
        {assign var=product1 value=$animal->getRecoProduct($reco.product_id_mvs1)}
        <tr>
            <td>
                <div style="display: inline; vertical-align: middle">
                    <input {if !$reco.transition12 AND $reco.product_id_mvs1 AND $reco.product_id_mvs2 }disabled="disabled"{/if} {if $animal->id_product == $reco.product_id_mvs1 && $animal->ration == $reco.qte_aliment1 }checked=checked{/if}
                           type="radio" id="reco-{$reco.id_recommandation}-product" name="product" value="1">
                    <label class="show-xs" style="vertical-align: inherit" for="reco-{$reco.id_recommandation}-product">Aliment n°1 {if $reco.transition12} - jusqu'à {$reco.transition12-1} mois{/if}</label>
                </div>

                <div class="show-xs" style="width: 100%">
                    <br>
                    <img style="margin: auto" class="replace-2x img-responsive"
                         src="{$link->getImageLink($product1.link_rewrite, $animal->getRecoProductImageId($product1.id_product), 'home_default')|escape:'html':'UTF-8'}"
                         alt="{if !empty($product1.legend)}{$product1.legend|escape:'html':'UTF-8'}{else}{$product1.name|escape:'html':'UTF-8'}{/if}"
                         title="{if !empty($product1.legend)}{$product1.legend|escape:'html':'UTF-8'}{else}{$product1.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if}
                    />
                    <br>
                    <strong>{$product1.name}</strong>
                    <br>
                    Ration : {$reco.qte_aliment1}g/jour*
                    <br>
                    <br>
                    <a href="{$link->getProductLink($product1.id_product)}" class="btn btn-default button button-small">
                                <span>
                                    <i class="icon-file-text-o right"></i>
                                    Fiche produit
                                </span>
                    </a>
                </div>

            </td>
            <td class="hide-xs">
                Aliment n°1
                {if $reco.transition12}
                    <br>
                    (jusqu'à {$reco.transition12 - 1} mois)
                {/if}
            </td>
            <td class="hide-xs">
                <img class="replace-2x img-responsive" style="margin: auto"
                     src="{$link->getImageLink($product1.link_rewrite, $animal->getRecoProductImageId($product1.id_product), 'home_default')|escape:'html':'UTF-8'}"
                     alt="{if !empty($product1.legend)}{$product1.legend|escape:'html':'UTF-8'}{else}{$product1.name|escape:'html':'UTF-8'}{/if}"
                     title="{if !empty($product1.legend)}{$product1.legend|escape:'html':'UTF-8'}{else}{$product1.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if}
                />
            </td>
            <td class="hide-xs">{$product1.name}</td>
            <td class="hide-xs">Ration : {$reco.qte_aliment1}g/jour*</td>
            <td class="hide-xs">
                <a href="{$link->getProductLink($product1.id_product)}" class="btn btn-default button button-small">
                            <span>
                                <i class="icon-file-text-o right"></i>
                                Fiche produit
                            </span>
                </a>
            </td>


        </tr>
    {/if}
    {if $reco.product_id_mvs2}
        {assign var=product2 value=$animal->getRecoProduct($reco.product_id_mvs2)}
        <tr>
            <td>
                <div style="display: inline; vertical-align: middle">
                    <input {if !$reco.transition12 AND  !$reco.transition23 AND $reco.product_id_mvs1 AND $reco.product_id_mvs2}disabled="disabled"{/if} {if $animal->id_product == $reco.product_id_mvs2 && $animal->ration == $reco.qte_aliment2 }checked=checked{/if}
                           type="radio" id="reco-{$reco.id_recommandation}-product" name="product" value="2">
                    <label class="show-xs" style="vertical-align: inherit" for="reco-{$reco.id_recommandation}-product"> Aliment n°2 {if $reco.transition23} - jusqu'à {$reco.transition23 - 1} mois{/if}</label>
                </div>

                <div class="show-xs" style="width: 100%">
                    <img style="margin: auto" class="replace-2x img-responsive"
                         src="{$link->getImageLink($product2.link_rewrite, $animal->getRecoProductImageId($product2.id_product), 'home_default')|escape:'html':'UTF-8'}"
                         alt="{if !empty($product2.legend)}{$product2.legend|escape:'html':'UTF-8'}{else}{$product2.name|escape:'html':'UTF-8'}{/if}"
                         title="{if !empty($product2.legend)}{$product2.legend|escape:'html':'UTF-8'}{else}{$product2.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if}
                    />
                    <br>
                    <strong>{$product2.name}</strong>
                    <br>
                    Ration : {$reco.qte_aliment2}g/jour*
                    <br>
                    <br>
                    <a href="{$link->getProductLink($product2.id_product)}" class="btn btn-default button button-small">
                            <span>
                                <i class="icon-file-text-o right"></i>
                                Fiche produit
                            </span>
                    </a>
                </div>

            </td>
            <td class="hide-xs">Aliment n°2
                {if $reco.transition23}
                    <br>
                    (jusqu'à {$reco.transition23 - 1} mois)
                {/if}
            </td>
            <td class="hide-xs">
                <img class="replace-2x img-responsive" style="margin: auto"
                     src="{$link->getImageLink($product2.link_rewrite, $animal->getRecoProductImageId($product2.id_product), 'home_default')|escape:'html':'UTF-8'}"
                     alt="{if !empty($product2.legend)}{$product2.legend|escape:'html':'UTF-8'}{else}{$product2.name|escape:'html':'UTF-8'}{/if}"
                     title="{if !empty($product2.legend)}{$product2.legend|escape:'html':'UTF-8'}{else}{$product2.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if}
                />
            </td>
            <td class="hide-xs">{$product2.name}</td>
            <td class="hide-xs">Ration : {$reco.qte_aliment2}g/jour*</td>
            <td class="hide-xs">
                <a href="{$link->getProductLink($product2.id_product)}" class="btn btn-default button button-small">
                            <span>
                                <i class="icon-file-text-o right"></i>
                                Fiche produit
                            </span>
                </a>
            </td>
        </tr>
    {/if}
    {if $reco.product_id_mvs3}
        {assign var=product3 value=$animal->getRecoProduct($reco.product_id_mvs3)}
        <tr>
            <td>
                <div style="display: inline; vertical-align: middle">
                    <input {if !$reco.transition23 AND $reco.product_id_mvs1 AND $reco.product_id_mvs2 AND $reco.product_id_mvs3 }disabled="disabled"{/if} {if $animal->id_product == $reco.product_id_mvs3 && $animal->ration == $reco.qte_aliment3 }checked=checked{/if}
                           type="radio" id="reco-{$reco.id_recommandation}-product" name="product" value="3">
                    <label class="show-xs" style="vertical-align: inherit" for="reco-{$reco.id_recommandation}-product">Aliment n°3 {if $reco.transition23} - après {$reco.transition23 - 1} mois{/if}</label>
                </div>

                <div class="show-xs" style="width: 100%">
                    <img style="margin: auto" class="replace-2x img-responsive"
                         src="{$link->getImageLink($product3.link_rewrite, $animal->getRecoProductImageId($product3.id_product), 'home_default')|escape:'html':'UTF-8'}"
                         alt="{if !empty($product3.legend)}{$product3.legend|escape:'html':'UTF-8'}{else}{$product3.name|escape:'html':'UTF-8'}{/if}"
                         title="{if !empty($product3.legend)}{$product3.legend|escape:'html':'UTF-8'}{else}{$product3.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if}
                    />
                    <br>
                    <strong>{$product3.name}</strong>
                    <br>
                    Ration : {$reco.qte_aliment3}g/jour*
                    <br>
                    <br>
                    <a href="{$link->getProductLink($product3.id_product)}" class="btn btn-default button button-small">
                            <span>
                                <i class="icon-file-text-o right"></i>
                                Fiche produit
                            </span>
                    </a>
                </div>

            </td>
            <td class="hide-xs">Aliment n°3
                {if $reco.transition23}
                    <br>
                    (après {$reco.transition23 - 1} mois)
                {/if}
            </td>
            <td class="hide-xs">
                <img class="replace-2x img-responsive" style="margin: auto"
                     src="{$link->getImageLink($product3.link_rewrite, $animal->getRecoProductImageId($product3.id_product), 'home_default')|escape:'html':'UTF-8'}"
                     alt="{if !empty($product3.legend)}{$product3.legend|escape:'html':'UTF-8'}{else}{$product3.name|escape:'html':'UTF-8'}{/if}"
                     title="{if !empty($product3.legend)}{$product3.legend|escape:'html':'UTF-8'}{else}{$product3.name|escape:'html':'UTF-8'}{/if}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if}
                />
            </td>
            <td class="hide-xs">{$product3.name}</td>
            <td class="hide-xs">Ration : {$reco.qte_aliment3}g/jour*</td>
            <td class="hide-xs">
                <a href="{$link->getProductLink($product3.id_product)}" class="btn btn-default button button-small">
                            <span>
                                <i class="icon-file-text-o right"></i>
                                Fiche produit
                            </span>
                </a>
            </td>
        </tr>
    {/if}
    </tbody>
</table>
