Responsive design using CSS Grid and Flexbox, Media Queries.

I learnt that when making a choice on whether to use Flexbox or Grid for layout, it is often not a case of one or the other, they work very well together. I also faced a significant challenge whilst styling. The problem was that I did not respect the order in which elements appeared in my HTML file. I tried to place the element which appeared second in my HTML file in the second column of my CSS grid without placing the element which appeared before it first, not unknowing that this would cause the Grid to automatically create a row. The element which appeared first was placed in the first column on the second row. I only wanted one row with two columns. It took me a while, but through the help of the Discord community, I solved the problem.

I would like feedback on best practices when writing media queries. Is there such thing as 'too many' media queries. Also what is the best practice on building a responsive page? I start with mobile first then jump straight to desktop. Is this bad??