Problem with customization in Piet Mondrian's Composition II (bootstrap-grid-painting) exercise

Hi,

I’m working on this exercise: https://www.codecademy.com/courses/learn-bootstrap/projects/bootstrap-grid-painting
This is my actual code: https://gist.github.com/a6a6bb3cc7c86a22da832713dcd7a19d

Let’s thinking about only A,B,C fragments of picture, to make it simple.

What I want to achieve, is this 3 design variations based on screen-size:

Now, this issues I have:

  1. How to get rid of vertical space at medium screen? I have been playing with the margin of respective element, but no success at all.
  2. How to achieve the goal for large screen?
  3. Column size 12 in div A, mean: take all space from parent div area(which is 4) or take all space from container in a global?

Thx!