methods of implementing responsive layouts and potential drawbacks

Question

I'm working on a project in which the layout of the mobile views differs significantly from that of the views on larger screens. I'm implementing a system where I have separate components that display the layout for both views, but they are conditionally rendered based on screen size (using Tailwind):

SettingsPage.tsx

import { FC } from 'react'

import Header from '../components/Header'
import SettingsMobileLayout from '../components/SettingsMobileLayout'
import SettingsDesktopLayout from '../components/SettingsDesktopLayout'

const Settings: FC = () => {
    return (
        <>
            <Header />
            <div className="mt-8 md:mt-24">
                <div className="md:hidden">
                    <SettingsMobileLayout />
                </div>
                <div className="hidden md:block">
                    <SettingsDesktopLayout />
                </div>
            </div>
        </>
    )
}

export default Settings

Both Layouts have components common to both of them. The question is; is this kind of set-up bad practice? Must I find a way to put both the mobile and desktop views in the same component? Would my current layout structure negatively affect testing?