Responsive Master/Sub-Master/Detail Layout

Hello everyone,
First off, I am pretty new to Ionic. I dabbled with alot of the components, worked through the tutorial, through every component and combined it all in a test-project. Then I wanted to get to the real app. I’ve been trying to build an app using a master/detail-pattern. To test everything out I realized it with 2 lists combined with the grid-system initially where the selection of the category in the list on the left updates the list on the right. Of course that is not a good responsive design by itself because it disregards screen-size and -orientation. Additionally the desired structure would be a little more extensive. For now there should be a category-list, an item-list and a detail-view all on the same page and every one of those views should be equally as wide. This is the structure for the landscape view on tablets. In portrait view and landscape view on phones it should only show the most advanced view and it’s parent view. Finally, in portrait view on phones it should only show the current view.
As I said, I was able to get the individual parts to work but I don’t know the best approach to solve the aspect of responsiveness. I have spent a lot of time to try and use split-panes but it doesn’t seem to work well with what I want to do.
My question now is: Does anybody know the best way to approach this (the right components) or a tutorial for this kind of structure? Is there a way to couple different html-templates with the screen size? I have been searching for a very long time and have not been lucky.

See: