How do I distinguish the difference in naming and file structure between components and mobile components in React?

Here is my example structure:

.
├── App.jsx
├── index.js
└── src
    └── components
        ├── Button.jsx
        └── Header
            └── Header.jsx

Question:

1. Should I name Header.jsx inside Header folder? (I personally prefer this way insteade of Header/index.jsx because I though it would be better to identify in vscode tab.)
2. When It has mobile component, where should I put it and how to name it, for example:

• a. components/ButtonMobile.jsx
• b. components/Button/ButtonMobile.jsx, components/Button/Button.jsx
• c. components/Button/mobile/Button.jsx, components/Button/Button.jsx
• d. components/mobile/Button.jsx