Progressive Web Apps with Ionic2 - advice on best practices to maximize client code reuse on all devices

Question

I am looking at Ionic2 to build a Progressive Web App with the following objectives:

1. maximizing reuse of client code for all devices
2. at the same time provide a good user experience on all devices

I am currently facing a simple (but I think representative) problem. I have a list representing the bookings of a certain user (MyBookingsPage); the user can 'modify' or 'cancel' each booking selecting a 'modify' or 'cancel' button.

I want the list to appear:

• on desktop: as a list of items each of which shows 2 buttons (for 'modify' and 'cancel' actions)
• on mobile and tablet: as a list of swiping items that show the 'modify' and 'cancel' buttons when the user swipes the item (a quite standard behaviour on mobile devices)

This means that, depending on the device, the template of MyBookingsPage needs to use different Ionic2 components.

In order to accomplish the desired result, I use ng2-responsive library (https://github.com/ManuCutillas/ng2-responsive).

Here is the code of the template

<ion-content padding class="outer-content">
  <ion-list>
    <ion-list-header>
      <h3>{{getListHeader()}}</h3>
    </ion-list-header>
    <div *showItDevice="['desktop','smartTv']">
      <ion-item *ngFor="let booking of bookings">
        <ion-badge item-left color={{getStatusColor(booking)}} style="width: 77px">{{booking.status.text}}</ion-badge>
        <ion-label>{{getBookingDesc(booking)}}</ion-label>
        <button ion-button clear item-right color="danger">
          <ion-icon name="trash">Cancel</ion-icon>
        </button>
        <button ion-button clear item-right color="primary">
          <ion-icon name="brush">Change</ion-icon>
        </button>
      </ion-item>
    </div>

    <div *showItDevice="['mobile','tablet']">
      <ion-item-sliding *ngFor="let booking of bookings">
        <ion-item>
          <ion-badge item-left color={{getStatusColor(booking)}} style="width: 77px">{{booking.status.text}}</ion-badge>
          <p>{{getBookingDescShort(booking)}}</p>
        </ion-item>
        <ion-item-options>
          <button ion-button clear item-left color="danger">
            <ion-icon name="trash"></ion-icon>
            Cancel
          </button>
          <button ion-button clear item-left color="primary">
            <ion-icon name="brush"></ion-icon>
            Change
          </button>
        </ion-item-options>
      </ion-item-sliding>
    </div>
  </ion-list>
</ion-content>

Now my questions:

1. Is it reasonable to think to build a Progressive Web App with Ionic2 with the objective of keeping a single line of code for all devices and, at the same time, guarantee a good user experience on all devices?
2. Is the use of ng2-responsive (in the way represented by the above example) a good strategy to reach the above objectives?

Any advice on best practices on these topics is very welcome