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 which I am rendering in Grid Columns.

import React,{ Component } from 'react';
import { connect } from 'react-redux';
import { Grid, Header } from 'semantic-ui-react'
import GetJobs from '../../components/Home/GetJobs';
import PostForm from '../../components/Home/PostForm';
import Feed from '../../components/Home/Feed';
import Articles from '../../components/Home/Articles';
import './home.css'

class Home extends Component {
  render() {
    return(
      <Grid id="home" stackable columns={3}>
        <Grid.Row>
          <Grid.Column>
            <Header>Articles</Header>
            <Articles/>
          </Grid.Column>
          <Grid.Column>
            <Feed/>
          </Grid.Column>
          <Grid.Column>
            <Header>Jobs</Header>
            <GetJobs/>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

export default Home;

The columns stack properly when going from desktop to mobile. It goes from 3 to 1 column. However, at tablet size, the 3 columns are just fitted more tightly instead of having 2 columns on the screen, and 1 being stacked below.

View Component Tablet View of Component

Ideally, I'd like Feed and Jobs to stay on the the screen when going from Desktop to Tablet size, and when going from Tablet to Mobile, have Feed on top, Jobs below, and Articles at the bottom.

Any help is appreciated on how to get this grid to respond like this.

Quinonoid

anyone? any guidances is appreciated. Do I have to specify media queries even though I am using a CSS framework? or is there a work around for my site to respond to different devices? – Quinonoid

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>

Possessed