title: Styled Components - Inline styling overlaps the media query styles
body: <p>I am new to styled components. I am trying to change the flexDirection in media query but my inline styling <code>row</code> seems to overlap with media query styles.</p>
  <p>Code Link: <a href="https://codesandbox.io/s/hungry-minsky-npubu" rel="nofollow noreferrer">https://codesandbox.io/s/hungry-minsky-npubu</a></p>
  <p>I want the <code>flexDirection</code> to change to <code>column</code> when width &lt;600px and by default the direction should be <code>row</code>. <strong>I cannot remove the row prop, that's the requirement</strong></p>
  <p>I am not sure how to handle this issue. Can anyone please help me with this?</p>
  <p>Thanks</p>