Проблема адаптивного дизайна при использовании пользовательского интерфейса Grid Material?

Question

У меня небольшая проблема с использованием Grid Component в React JS Project. Я начну с написания некоторого кода и объясню, чего я хочу добиться с помощью изображений:

скажем, что этот код отображается:

 <div style="margin:100px 20%; width:80%" >
     <Grid container>
         <Grid item xs={6}>
             <MyElement 
               contentLeft="Something displayed in the left"
               contentRight="Something displayed in the right"
             >
         </Grid>
         <Grid item xs={6}>
            <MyElement 
               contentLeft="Something displayed in the left"
               contentRight="Something displayed in the right"
            >
         </Grid>
     </Grid>
 </div>

А вот как это выглядит, скажем (Мои сетки в красном и большой div в черном):

Когда я изменяю размер своего окна и уменьшаю его, вот как это выглядит:

Я знаю, что есть проблема в моем собственном Элементе, и это легко, потому что я создал его CSS, но я не знаю, как теперь управлять атрибутом Grids, потому что я хочу, чтобы xs изменялся с 6 на 12 в определенной позиции.

Как это сделать? если это невозможно, есть ли лучшее решение?

Любая помощь будет принята с благодарностью.

Answer 1

Зависит от того, какой размер вы хотите, чтобы он сломался с 6 до 12, но это так же просто, как ввести правильные значения реквизитов в:

<Grid item xs={12} sm={6}>

Обязательно прочитайте полный вариант использования здесь: https://material -ui.com / макет / сетки /