Is component duplication for responsive display in react a good idea?

Question

I am trying to display a component called 'BillingInfo' on my checkoutpage in react . using tailwind css.

<Checkout>
  //some complex layout
//container 1
  <div >
    /** other compmonents */
    <div className='hidden desktop:block'>
      <BillingInfo>
    </div>
    /** other compmonents */
  </div>

//container 2
  <div>
  /** other compmonents */
    <div className='desktop:hidden'>
      <BillingInfo>
      
    </div>
    /** other compmonents */
  </div>
</Checkout>

So basically I have layout where i need to show BillingInfo component(a component with few action handlers and state variable) whose position is based on view port. I am hiding the 1st billing Info component on mobile and showing second component and vice-a versa as per view port

Is it good idea to this way. I want to understand the performance implication and any pitfalls with this approach. Other way around this I see to refactor my layout such that i need to use only one component. This involves changing the grids classes and orders of lots of component's.

UPDATE: To be clear why i am using 2 component is because they are contained in 2 different containers and on mobile device i need stack- all component in certain order which is very different from desktop layout

Answer 1

If you're using taiwind css for styling. You can add breakpoint classes like this

<div class="block md:hidden">

Or you can do with simple CSS using media query

refer here : https://www.w3schools.com/css/css_rwd_mediaqueries.asp