I want to show the components on top of one another (flexDirection={"column"}).
For medium and large screen it should occupy as (md={3}) but for mobile screens it should occupy whole width (xs={12}).

i have some struggles with material ui grid size. i want to set fixed grid size at specified breakpoint. For example at xs width is full but at sm width is 200px