Responsive Semantic UI React Grid, Columns, Rows

Question

I\'m having trouble making Semantic UI React grid fully responsive, at least respond the way I want for Desktop, Tablet and Mobile.

I have following three components wh

Answer 1

stackable prop collapses columns only on mobile device, for precise control of widths on diffent devices you should use responsive props. You can also try to play with only and reversed. I made an example that shows how to do this.

<Grid>
  <Grid.Column only='computer' computer={5}>
    <Header>Articles</Header>
  </Grid.Column>
  <Grid.Column mobile={16} tablet={8} computer={5}>
    <Feed/>
  </Grid.Column>
  <Grid.Column mobile={16} tablet={8} computer={5}>
    <GetJobs/>
  </Grid.Column>
  <Grid.Column only='mobile tablet' mobile={16} tablet={16}>
    <Header>Articles</Header>
  </Grid.Column>
</Grid>