Make Object Fall Over Correctly
On your second screenshot we can see the gizmo showing 3 axes:

The green Y axis is cut off and goes up/down (the letter is up, so the Y coordinate increases up and decreases down), X axis goes right/left (increases towards the right), and Z is in middle - because it goes towards you / away from you.
Rotating something around an axis is like pretending there's a real, physical axis going through that object, think of a wheel in a car and how it rotates around its axis. In other words, if you choose to rotate around a particular axis, every point of the object will remain within the same distance to the axis during the rotation.
  rotation around Z axis; all vertices stay at same distance (and in this case they share that distance which is the same as the radius of the black circle)
It seems you either want to rotate around the red X axis or green Y axis:

But since you want to make it flip over, with the lower end not moving, you need to move the axis of the object around which you rotate. All axes go through the origin point, so you move the X or Y axis by moving the origin point. Keep in mind the green and red lines in the viewport won't move, as they represent the X=0 and Y=0 in the world coordinate space, and not object coordinate space:

The effect is the same as if you moved the mesh (in Edit Mode) up to be above the XY axes (both local and world as in this case the origin is at 0;0;0 coordinates):

Keep in mind you don't actually have to modify the origin/mesh of the object. You can position your 3D cursor wherever you want and rotate using this cursor as Pivot Point, instead of Origin:

For a still image it doesn't really matter which technique you use, but for an animation you might run into different problems for each, so I recommend to try each of them and see which of those problems you like the most. Often you will use empties and parent your objects to them, for an additional control.