Actualmente estoy usando Bootstrap 4.1.3 con Vue.js 2.5.17 y tengo un componente de Vue.js llamado 'c-card.vue', esta card no se adapta a celulares, por lo que quiero hacer una card especifica para celulares.
La mejor forma seria crear una c-card_mobile.vue o editar c-card.vue de cierta forma para que cuando detecte que es un dispositivo móvil no use el código que actualmente se encuentra, sino que el nuevo.
Este es la vista donde se listan todas mis cards:
<div class="row mt-5">
@foreach ($cards as $c)
<div class="col-md-12">
<c-card
card-title="{{ $c->name }}"
card-sub-title="{{ $c->subtitle }}"
button-link="{{ $c->url }}"
card-image="{{ $c->getThumbnailImage() }}"
</c-card>
</div>
@endforeach
</div>
Es aquí donde debería llamar a c-card_mobile.vue o que me recomiendan?