[Share] Summary Block: Text (left) - Image (right)

To change Summary Block layout to Text (left) - Image (right) or Text (right) - Image (left) like this

#1. First, find ID of Summary Block.

In my example, it is: #block-yui_3_17_2_1_1728103003203_14660

#2. Next, use this CSS code

#block-yui_3_17_2_1_1728103003203_14660 {
  div.summary-item {
      display: flex !important;
      flex-direction: row-reverse;
      align-items: center;
      justify-content: flex-end;
  }
  .summary-thumbnail-outer-container {
      width: 50%;
  }
  .summary-content {
      width: 47%;
      margin-right: 3%;
  }
}

#3. If you want to make this effects on Desktop Only, use this CSS code

@media screen and (min-width:768px) {
  #block-yui_3_17_2_1_1728103003203_14660 {
    div.summary-item {
        display: flex !important;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: flex-end;
    }
    .summary-thumbnail-outer-container {
        width: 50%;
    }
    .summary-content {
        width: 47%;
        margin-right: 3%;
    }
  }
}

#4. If you want to change to Left Image - Right text, just change 

row-reverse
to
row