html - Responsive grid - Verically/Horizontally stacked with changing width/height -

i want make responsive grid fits size of mobile in both landscape , potrait mode.

so have following components in div/grid:

1. an image
2. a div talking description.
3. a buy button.
4. a share button.

so in potrait mode of them have same width , stacked vertically, whereas in landscape mode of them have height , stacked horizontally. eg:

in landscape

in potrait

i not versed css, , have been trying past 2 days. appreciated.

there media-query check orientation of device:

@media , (orientation: portrait) { ... } 

https://developer.mozilla.org/en-us/docs/web/guide/css/media_queries#orientation

you can use apply css-rules elements if device in portrait mode:

@media , (orientation: portrait) {    .column {     width: 100%;   } } 

something this