Code block alignment and mobile stacking

I'm working on this page (www.meridianacademy.org/who-we-are-new) and have a series of code blocks. Two issues I'm struggling with:

1. How do I keep each code block in a row aligned in that row? Right now, the blocks are askew within a row (seemingly referencing a column).
2. When they stack in a mobile view, I'd like them to stack by items in a row (keeping names alphabetized). Is this possible?

Thanks!

@nsmargolis Have you solved yet?

1. Can you explain more clearly? I do not quite understand
2. You mean: image (left) - text (right)?

Hi @tuanphan, the biggest problem is that the rows of code blocks do not align. So when text is larger in one it results in offsetting a block:

@nsmargolis Add to Home > Design > Custom CSS

/* Desktop */
@media screen and (min-width:901px) {
p.school {
   min-height: 65px;
}
}
/* Tablet */
@media screen and (min-width:641px) and (max-width:900px) {
p.school {
   min-height: 140px;
}
}

Works! Thanks @tuanphan!