Controlling how Bootstrap orders columns / rows when resizing

I am using Bootstrap to create a layout of elements. Specifically, I am creating a table of textboxes. The table element doesn't prove to be good enough when rescaling, so I would like to do it manually using the grid system of Bootstrap.

What I would really like is for the layout to be like this on desktop:

**A** *B* C D
**E** *F* G H
**I** *J* K L
**M** *N* O P

And on mobile for the first column to inherit the second column's elements, ie that every element from column 2 would move under column 1. Like this:

**A** C
**E** G 
**I** K
**M** O
**Q** S
*B* D
*F* H
*J* L
*N* P
*R* T

Is there any way to do this in Bootstrap? I have searched but I don't think I have found anything relevant. Thanks