How to create responsive layout with react-semantic-ui?

Question

How to create the layout as given below?

The layouts A and B in mobile must stack one after other. In the bigger screen the layout B must be togglable. Whereas, A adjusts to full screen or half according to the visibility of B.

My code sample

<Grid.Row>
  <Grid.Column computer={16} largeScreen={10}>
    <A />
  </Grid.Column>
  {showB && (
      <Grid.Column computer={16} largeScreen={6}>
        <B />
      </Grid.Column>
  )} 
</Grid>

Answer 1

You would need to declare the column A width in a variable that would change depending on if column B is open or not. A solution for that is here https://codesandbox.io/s/8843zowzj9

As semantic-ui Grid.Row can have a width of 16 units, columns A would start with that width, and it would decrease if you show column B (by the width you desire) or increase once you hide it.

The stackable columns={2} attributes in the Grid tag makes this clever enough to also make them stack once the screen reaches a mobile resolution.