レスポンシブセマンティックUIグリッド、列、行に反応する

Question

セマンティックUIリアクショングリッドを完全に反応させるのに問題があります。少なくとも、デスクトップ、タブレット、モバイルに対応しています。

グリッド列でレンダリングする以下の3つのコンポーネントがあります。

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; 

デスクトップからモバイルに移行するときに、列が正しくスタックされます。それは3列から1列になります。しかし、タブレットサイズでは、3つの列は、画面上に2つの列を持つ代わりに、よりしっかりと取り付けられ、1つは下に積み重ねられます。

ビューコンポーネント Tablet View of Component

理想的には、私はデスクトップからタブレットサイズに移行したときに、画面に滞在するフィードとジョブズのようにしたい、とタブレットからモバイルへ行くとき、上にフィードしています下のジョブ、下の記事などがあります。

このグリッドをこのように応答させる方法については、何か助けてください。

Answer 1

stackable小道具は携帯端末でのみ折りたたまれます。幅の狭いデバイスを細かく制御するには、responsive小道具を使用する必要があります。 onlyとreversedで試してみることもできます。私はこれを行う方法を示す例を作った。

<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>