How to force a column to be on top of another column (to overlap)

Issue

I have two grid columns that contain images, and I'd like to force them to be on top of each other, like it's shown in the design here:

However, neither Ionic, nor Bootstrap (that is used by Ionic) doesn't seem to provide such option.

What I currently have is the following code:

  <ion-row>
    <ion-col>
      <img src="assets/images/planet-ring.svg">
    </ion-col>
    <ion-col>
      <img src="assets/images/wear-image.png">
    </ion-col>
  </ion-row>

That puts the columns side by side:

I've also tried playing with absolute positions with the code below, but it made the ionic to lose some default column styles and forced the image to go out of the column:

.app-overlap-column {
  position: absolute;
  left: 0;
  right: 0;
}

Any ideas of how to achieve this?

Solution

Found a simple solution!
Just use offset="-12" on the second column like this:

<ion-row>
   <ion-col>
     <img src="assets/images/planet-ring.svg">
   </ion-col>
   <ion-col offset="-12">
     <img src="assets/images/wear-image.png">
   </ion-col>
 </ion-row>

P.S. This works, because the grid is divided into 12 "columns" and when we provide offset as -12, we basically move the column to the front, above the other one.

Answered By - Just Shadow