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