collapse columns, htm5 and bootstrap

Hello,

I am using bootstrap and sass for a website. Please tell me if and how the following can be accomplished:

column | column | column | column

for all screen sizes apart from xs

when screen size gets to xs I would like the content in the above columns to be displayed as follow:

column | column
column | column

(the pipe line is for explanatory purposes, it won't show up in the design)

i have a feeling that the way to accomplish the above is by using two identical rows,
displaying one row after the other in the html, and then using 'hidden' and 'visible' elements
for each column depending on screen size.

I tried this but couldn't make it work, is this the right way to go?

Thanks for your help.