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

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

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

 <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 в определенной позиции.

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

Любая помощь приветствуется.