title: How can i justifyContent only on specific sizes in react material ui?
body: <p>I have a grid layout in react material UI.</p>
  <p>I want on big sizes that content to be justified in the center but on small to be the default one flex-start.</p>
  <pre><code>&lt;Grid item xs={12} md={2}&gt;
                      &lt;Box display=&quot;flex&quot; justifyContent=&quot;center&quot;&gt;
                      &lt;FormControlLabel
                              control={
                                  &lt;Checkbox
                                      checked={checkbox}
                                      onChange={(e) =&gt; onCheckBoxChange(e)}
                                      name=&quot;checkedB&quot;
                                      color=&quot;primary&quot;
                                      className={classes.inputFullWidth}
                                  /&gt;
                              }
                              label=&quot;Search by date ?&quot;
                          /&gt;
                      &lt;/Box&gt;
                      
                      &lt;/Grid&gt;
  
  </code></pre>
  <p>The problem is that on their documentation i didn't find such an example for that</p>
  <p><a href="https://material-ui.com/system/flexbox/#justify-content" rel="nofollow noreferrer">https://material-ui.com/system/flexbox/#justify-content</a></p>
  <p>In bootstrap we have something like</p>
  <pre><code>justify-content-md=&quot;center&quot;
  </code></pre>
  <p>which means only on md &gt; breakpoints the content will be justified in center.</p>
  <p>How can i do this with react material ui ?</p>