Grid system for message app

Hi everyone,
I looking for solution how to prepare grid system for message app.
I want to my grid behave will be exactly like fb messenger or iMessage.
To be more specific, if application is in vertical view user should only see last messages from all senders, but if he switch to horizontal view would be able to see message list from senders on the left and messages from current selected sender on right side of screen.

How can I get this effect? I will be grateful for any examples.

Use media queries to detect the device’s orientation, then add your styles to them.

@media only screen and (orientation: portrait) {
  // Vertical CSS
}
@media only screen and (orientation: landscape) {
  // Horizontal CSS
}