Block order and boarder lines in mobile

Hi Dev,

There are two approaches you can try to achieve the layout you one.

1. A setup like this where everything is in one Grid Block: https://share.getcloudapp.com/qGuOdg0e

Set the necessary Container Widths: https://share.getcloudapp.com/9ZuoEYqA

Then add my-grid to the classes of the Grid Block as such: https://share.getcloudapp.com/xQuwW9Zp

Then, add this CSS in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .gb-grid-wrapper.my-grid .gb-grid-column:nth-of-type(2) {
        order:1;
    }

    .gb-grid-wrapper.my-grid .gb-grid-column:nth-of-type(4) {
        order: 2;
    }
}

2. Create two Grid Blocks. One for desktop and tablet and the other for mobile. Then, place them both in a Container Block separately, and set the hide-on-* settings of the Container Block as such: https://share.getcloudapp.com/bLuBeJGj

Lastly, the border size can be modified depending on the view as such: https://share.getcloudapp.com/xQuwW9dw

Hope this helps!