更改material-ui中Grid Item的堆疊順序

Question

每當瀏覽器縮小時，我都會遇到網格項的堆疊順序問題。

這是我在普通桌面屏幕上想要的（ lg ）：

---------------------------------------------
|   col 1     |         col 2       | col 3 |
---------------------------------------------

但是在縮小瀏覽器后，我得到以下結果：

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 2             |
-------------------------
-------------------------
|     col 3             |
-------------------------

我可以使用 Material ui Grid 布局在移動屏幕上實現此目的嗎：

-------------------------
|     col 1             |
-------------------------
-------------------------
|     col 3             |
-------------------------
-------------------------
|     col 2             |
-------------------------

我已閱讀有關更改同一主題的 CSS 網格順序的文章，但如何使用 material-ui 網格布局實現此目的。

Answer 1

選項 n°1

const styles = theme => ({
  item2: {
    order: 3,
    [theme.breakpoints.up('sm')]: {
      order: 2,
    },
  },
  item3: {
    order: 2,
    [theme.breakpoints.up('sm')]: {
      order: 3,
    },
  },
});

// ...

<Grid container spacing={16} justify="flex-start">
  <Grid item xs={12} sm={6} md={4} lg={4}>
    <Paper className={classes.paper}>
      <h1>{1}</h1>
    </Paper>
  </Grid>
  <Grid item xs={12} sm={6} md={4} lg={4} className={classes.item2}>
    <Paper className={classes.paper}>
      <h1>{2}</h1>
    </Paper>
  </Grid>
  <Grid item xs={12} sm={6} md={4} lg={4} className={classes.item3}>
    <Paper className={classes.paper}>
      <h1>{3}</h1>
    </Paper>
  </Grid>
</Grid>

https://codesandbox.io/s/m5plooxxoj

選項 n°2

    <Grid container spacing={16} justify="flex-start">
      <Grid item xs={12} sm={6} md={4} lg={4}>
        <Paper className={classes.paper}>
          <h1>{1}</h1>
        </Paper>
      </Grid>
      <Box clone order={{ xs: 3, sm: 2 }}>
        <Grid item xs={12} sm={6} md={4} lg={4}>
          <Paper className={classes.paper}>
            <h1>{2}</h1>
          </Paper>
        </Grid>
      </Box>
      <Box clone order={{ xs: 2, sm: 3 }}>
        <Grid item xs={12} sm={6} md={4} lg={4}>
          <Paper className={classes.paper}>
            <h1>{3}</h1>
          </Paper>
        </Grid>
      </Box>
    </Grid>

https://codesandbox.io/s/xvv7o07614

Answer 2

擴展到 Olivier 的答案 Material-UI 在其實現中大量使用 CSS flexbox 布局。 作為文檔引用

一個 flex 容器是由一個元素生成的盒子，它具有 flex 或 inline-flex 的計算顯示。 彈性容器的流入子項稱為彈性項目，並使用彈性布局模型進行布局。

所以網格項目是彈性項目，網格容器是外行語言中的彈性盒容器。 因此，當 Box 或 Grid Container 調整大小時，我們可以使用 Grid 項目上的 order 屬性來更改它們的相對外觀順序。 因此，以下列方式將樣式傳遞給網格項應該可以解決

  itemStyle: {
    order: ${Desired_order_before_Shrinking},

    [theme.breakpoints.up(`${DesiredScreenSize}`)]: {
      order: ${Desired_order_after_Shrinking},
    },
 
  }

最后執行<Grid item xs={12} md={6} className={this.props.classes.itemStyle}>將重新排序該項目。 希望它能產生更好的理解。

更新：Material UI V5。 感謝@Adam Cooper 在下面的回答

<Grid container spacing={2}>
  <Grid item md={12} lg={4} order={{ md: 1, lg: 1 }}>col 1</Grid>
  <Grid item md={12} lg={4} order={{ md: 3, lg: 2 }}>col 2</Grid>
  <Grid item md={12} lg={4} order={{ md: 2, lg: 3 }}>col 3</Grid>
</Grid>

Answer 3

使用 material-ui v5，可以使用 order prop 和新的響應式樣式系統更優雅地實現這一點：

<Grid container spacing={2}>
  <Grid item md={12} lg={4} order={{ md: 1, lg: 1 }}>col 1</Grid>
  <Grid item md={12} lg={4} order={{ md: 3, lg: 2 }}>col 2</Grid>
  <Grid item md={12} lg={4} order={{ md: 2, lg: 3 }}>col 3</Grid>
</Grid>