Hi there,
I’m using the “layout” field type and enjoying the possibilities it offers, but I’m not sure how to proceed in order to make the grid responsive when I write the markup.
Maybe someone else has come across the same challenge and can shed some light 
The layout field lets me define a fixed set of columns for each row, regardless of the screen width (let’s say I create a row with four columns, for example). I’m using Bootstrap grid, which is 12-column based, just as how the layout field works.
Using the span() method, the markup will consist of 4 items, each of them 3-columns wide.
That’s fine for wider screens, but how do you address smaller screens?
For now, I’ve created a method to “translate” each column-width depending on the screen width. For example: if I define 4 columns in the layout field, I will get a grid as follows: 3 columns for larger screens, 6 columns for the “medium” breakpoint and 12 columns for smaller breakpoints.
That’s working ok so far, but what about cases where this “automatic translation” doesn’t create the layout I want, or what about scenarios where I would like to reorder the columns depending on screen width? Maybe the layout field is not good for those cases and that’s it? Or maybe I’m missing something
If somebody has thoughts on this, or are in a similar situation, I would appreciate any ideas or suggestions.
Thank you very much!