Change widget appearance order

I have an internal page divided to several columns and rows as described in this link
https://www.dropbox.com/s/o0ae66bkewzo2f7/Screenshot%202017-04-02%2018.04.20.png?dl=0

layout is 2 raws of 3 and 5 columns (, seperates between column)
title for content 1-2, ,title for content 3-4
content 1, content 2, ,content 3, content 4

On desktop view, it works like a charm.
however, when I change the view to mobile view the content shows up in an unintended order

title for content 1-2
title for content 3-4

content 1
content 2
content 3
content 4

rather than

title for content 1-2
content 1
content 2

title for content 3-4
content 3
content 4

Is there a way to solve the problem?
the solution needs to affect the scope of the layout builder widget or the entire page, not website wide effect.
I have ‘Simple CSS’ and ‘Super Simple CSS’ installed do I also have a CSS field in the bottom of the page.
I cannot post a public URL so if you need, please instruct me how to post a private link