title: Responsive Semantic UI React Grid, Columns, Rows
body: <p>I'm having trouble making Semantic UI React grid fully responsive, at least respond the way I want for Desktop, Tablet and Mobile. </p>
  
  <p>I have following three components which I am rendering in Grid Columns. </p>
  
  <pre><code>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(
        &lt;Grid id="home" stackable columns={3}&gt;
          &lt;Grid.Row&gt;
            &lt;Grid.Column&gt;
              &lt;Header&gt;Articles&lt;/Header&gt;
              &lt;Articles/&gt;
            &lt;/Grid.Column&gt;
            &lt;Grid.Column&gt;
              &lt;Feed/&gt;
            &lt;/Grid.Column&gt;
            &lt;Grid.Column&gt;
              &lt;Header&gt;Jobs&lt;/Header&gt;
              &lt;GetJobs/&gt;
            &lt;/Grid.Column&gt;
          &lt;/Grid.Row&gt;
        &lt;/Grid&gt;
      )
    }
  }
  
  export default Home;
  </code></pre>
  
  <p>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. </p>
  
  <p><strong>View Component</strong> 
  <a href="https://i.stack.imgur.com/WzeaT.jpg" rel="noreferrer">Tablet View of Component
  </a></p>
  
  <p>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. </p>
  
  <p>Any help is appreciated on how to get this grid to respond like this. </p>